CODEWITHSUNDEEP
jqueryhtmlcsshideshow
benny
benny

Reputation: 474

Have specific button hide div

I have a simple script which I've been battling back and forth to find a a great solution to. I wish to have it show when I click "show". And have it hide when I click "hide". The problem is the entire div hides itself when you click on it, which won't work. I want it so only the button hides it the hidden div.

Fiddle: http://jsfiddle.net/QKJA7/

$(document).ready(function () {
                var content = $('.below').hide();
                $('.toggleBtn').on('click', function () {
                    $(this).next('.below').slideToggle();
                    return false;
                });
                $('.below').on('click', function () {
                    $(this).slideToggle();
                });
            });

Upvotes: 0

Views: 101

Answers (2)

Balint Bako
Balint Bako

Reputation: 2560

Check this: http://jsfiddle.net/QKJA7/1/

        $(document).ready(function () {
            var content = $('.below').hide();
            $('.toggleBtn').on('click', function () {
                $(this).next('.below').slideToggle();
                return false;
            });
            $('.below button').on('click', function () {
                $(this).parent().slideToggle();
            });
        });

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function () {
    var content = $('.below').hide();
    $('.toggleBtn').on('click', function () {
        $(this).next('.below').slideToggle();
        return false;
    });
    //register the handler to button element inside .below
    $('.below button').on('click', function () {
        //find the ancestor .below element of the clicked button
        $(this).closest('.below').slideToggle();
    });
});

Demo: Fiddle

Upvotes: 2

Related Questions