CODEWITHSUNDEEP
jqueryhtmltoggleparent-childslide
Danienllxxox
Danienllxxox

Reputation: 423

Jquery Toggle slide of Child Element

I'm trying to create a list of titles that when clicked will show the information underneath them and then when clicked again will hide that element.

Here is my jQuery:

$(document).ready(function() {

        $('.content').hide();

        $(".reveal-more").click(function() {
            $(".content", this).slideDown("slow");
            $(".content", this).addClass("open-information");
            $(".reveal-more h3").addClass("open-container");

        });

        $(".reveal-more").click(function() {

            $(".content").hide();
        });

});

and here is my HTML:

<div class="reveal-more ">
    <h3 >Party Wall Act</h3>
    <div class="content">
             Lorem Ipsum .....
            </div>
</div>

When I click the title. the content slides down but it wont slide back up when I click it again. Can anyone help?

Upvotes: 1

Views: 2772

Answers (2)

Eric
Eric

Reputation: 18922

You need to make a condition in the click-event, wheter to show/hide the content. Right now you are binding the click-event two times, where the last one overrides the previous. You shall alter your code to something like this:

$(".reveal-more").click(function() {
    if ($(".content", this).hasClass('open-information')){
        // It is visible, then hide it
        $(".content", this).removeClass("open-information").slideUp("slow");
        $("h3", this).removeClass("open-container");
    } else {
        // Show it, as you previously did
        $(".content", this).addClass("open-information").slideDown("slow");
        $("h3", this).addClass("open-container");
    }
});

Upvotes: 0

bipen
bipen

Reputation: 36551

use toggle() and toggleClass();

$(document).ready(function() {

    $('.content').hide();

    $(".reveal-more").click(function() {
        $(".content", this).toggle("slow");
        $(".content", this).toggleClass("open-information");
        $(".reveal-more h3").toggleClass("open-container");

    });
});

fiddle here

Upvotes: 4

Related Questions