CODEWITHSUNDEEP
jqueryjquery-selectorstoggle
Jack
Jack

Reputation: 17

jQuery toggle div and text

I would like some help with this code, I have read similar questions & answers here on stackoverflow but I still can't get it right.

I have a link that populated by .html("") to read more…

when clicked it opens the hidden div and at the end the .html("") reads less...

When I click close, the div slides closed but the text still reads less...

I have read many articles on how to do this but am confused and can't get past this last hurdle, any help would be much appreciated.

// this is the intro div 

<div id="" class="">
    <p>
        Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim
        integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue
        wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas
        ligula nostra, accumsan taciti.
   </p> 
</div>

// this next div is hidden

<div class="overview-continued"> 
    <p>
        Ligula suspendisse nulla pretium, rhoncus tempor placerat fermentum, enim
        integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel elit, congue
        wisi enim nunc ultricies sit, magna tincidunt. Maecenas aliquam maecenas
        ligula nostra, accumsan taciti.
    </p>
</div>

<a class="show-overview" href="#"><h4></h4></a>

$(document).ready(function() {
    $(".overview-continued").hide();
    $(".show-overview").html("more...");
    $(".show-overview").click(function() {
        $(".overview-continued").slideToggle("1000");
        $(".show-overview").html("less...");
        return false;
    });
});​

Upvotes: 2

Views: 1397

Answers (4)

Nope
Nope

Reputation: 22329

You are only ever setting it to less... You also need to evaluate it and set it back to more... if the current value is less....

See DEMO: Comparing HTML 

$(document).ready(function() {
    $(".overview-continued").hide();
    $(".show-overview").html("more...");
    $(".show-overview").click(function() {
        var text = $(this).html();
        $(".overview-continued").slideToggle("1000");
        $(".show-overview").html(text == "less..." ? "more..." : "less...");
        return false;
    });
});​

Edit
freakish mentioned in the comments that comparing HTMLs is bad practice.
(Also updated samples to use the text and tags as specified by OP)

To that end, see alternative DEMO: Using Attributes

The anchor received a new custom attribute:

<a class="show-overview" data-item-state="showLess">...</a>​

Script is updated and a little re-factored too: 

$(document).ready(function() {
    $(".overview-continued").hide();

    setState();

    $(".show-overview").click(function() {
        $(".overview-continued").slideToggle("1000");
        setState();
        return false;
    });

    function setState() {
        var control = $(".show-overview");
        var state = control.attr("data-item-state");

        control.html(state == "showLess" ? "more..." : "less...");
        control.attr("data-item-state", state == "showLess" ? "showMore" : "showLess");
    };
});​

Upvotes: 5

freakish
freakish

Reputation: 56467

You need to know when the div is opened/closed from JavaScript point of view. Try this:

$(document).ready(function() {
    var overview = $(".overview-continued");
    overview.hide();
    var show = $(".show-overview");
    show.html("more...");
    show.click(function(e) {
        e.preventDefault();
        var is_opened = overview.data('is_opened');
        if (!is_opened) {
            overview.slideDown(500, function() {
                show.html("less...");
            });
        } else {
            overview.slideUp(500, function() {
                show.html("more...");
            });
        }
        overview.data('is_opened', !is_opened);
    });
});

Check this jsFiddle code. Note that I refactored your code a bit.

Upvotes: 2

mindandmedia
mindandmedia

Reputation: 6825

you are telling it right there in the click-function to label it with ".less". it would make it easier to understand, if you split it up in two methods... something along these lines:

$(document).ready(function() {
    function close(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("more...");
    }
    function open(){  
      $(".overview-continued").slideToggle("1000");
      $(".show-overview").html("less...");
    }
    $(".overview-continued").hide();
    $(".show-overview").toggle(open,close);
});​

edit: due to comments

Upvotes: 0

Nigel B
Nigel B

Reputation: 3597

You need to put a conditional in your click function because you are always setting .show-overview to "less..."

May not be the correct syntax but:

$(".show-overview").click(function()

    {
        $(".overview-continued").slideToggle("1000");
        if($(".show-overview").html() == "less...")
        {
        $(".show-overview").html("more...");
        }
        else
        {
        $(".show-overview").html("less...");
        }
        return false;

    });

Upvotes: 2

Related Questions