Question

I have a list of definitions with a jquery show/hide effect and “readmore” button that changes to “close” once its open. I now need to put another button that references an anchor at the top of the screen for each description. When I tried editing the script to add the new link, the “return to top of page” button then becomes another “close” button. I am not versed enough in JS to edit this script to make it do what I need it to without some strange consequence. Any help is appreciated.

SCRIPT
    $(function(){
    var slideHeight = 36;

    $('.jswrap').each(function(){
        var defHeight = $(this).height();

        if(defHeight >= slideHeight){
            $(this).css({'height':slideHeight,'max-height': defHeight});
            $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));
        }
    });

    $('.jsreadmore a').click(function(){
        var $targetSlide = $(this).parent().prev(),
            curHeight = $targetSlide.height(),
            defHeight = $targetSlide.css('max-height');

        if(curHeight == slideHeight){
            $targetSlide.animate({
                height: defHeight
            }, "normal");
            $targetSlide.next().children('a').html('Close');    
        }else{
            $targetSlide.animate({
                height: slideHeight
            }, "normal");
            $targetSlide.next().children('a').html('Read More');
        }
        return false;
    });

});

HTML

<div class="jscontainer">
            <h4><a id="onedefinition">Definition Text</a></h4>
            <div class="jswrap">
                 <p>content</p>
            <p>morecontent</p>
            </div></div>

CSS

.content_sub1 .jscontainer {margin:0 auto;}
.content_sub1 .jscontainer h2 {font-size:20px;color:#0087f1;}
.content_sub1 .jswrap {position:relative; padding:10px; overflow:hidden;}
.content_sub1 .jsgradient {width:100%;height:35px; position:absolute; bottom:0; left:0;}
.content_sub1 .jsreadmore {padding:5px; color:#333; text-align:right;}
.content_sub1 .jsreadmore a {padding-right:22px; font-weight:bold; font-size:12px; text-transform: uppercase; color:#c44;  font-family:arial, sans-serif;}
.content_sub1 .jsreadmore a:hover {color:#000;}

LINK

http://www.doctorhtiller.com/procedures.html

Answer 1

This is because you are manipulating ALL the anchors in your element with this:

$targetSlide.next().children('a').html('Read More');

and

$targetSlide.next().children('a').html('Close');

The children('a') code says “Let’s affect all anchors which are direct children of the next() element”. Since your “return to top of page” anchor is simply another anchor, it has its html turned into ‘Read More’ or ‘Close’ respectively. What you need to do is differentiate your anchor from the anchors created by the script. We can easily do this by adding a class to the original anchors.

So, instead of just adding an <a href="#"> we need to spice it up. Change:

$(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>'));

to

$(this).after($('<div class="jsreadmore"><a href="#" class="read_more_link">Read More</a></div>'));

Now it’s much easier to reference that specific anchor element. Simply add the class to your selector code:

$targetSlide.next().children('a.read_more_link').html('Read More');
$targetSlide.next().children('a.read_more_link').html('Close');