CODEWITHSUNDEEP
jqueryhtmlhidetoggleshow
user1652920
user1652920

Reputation: 149

hide/show toggle divs

Please help! I've been trying to figure out how to close a particular DIV when it is already open.

For example, please view: http://jsfiddle.net/WGRvw/

If I click on BC the DIV should appear but if I click on it again, the DIV should disappear but I can't figure out how to make it disappear. Also, I only want one DIV to appear at a time.

I tried doing an else:

          $(function(){
            $(document).ready(function () {
                $(".prov").click(function(){
                    $(".clearfix").hide();
                });

                $('#BC').hide();
                $('#BC-show').click(function () {
                    if( $('#BC').toggle('slow')) {
                        return false;

                    }
                    else {
                        $('#BC').hide();
                    }
                });
                $('#AB').hide();
                $('#AB-show').click(function () {
                    if($('#AB').toggle('slow')) {
                        return false;

                    }
                    else {
                        $('#AB').hide();
                    }
                });
                });
            });

    });

Your help is appreciated.

Thanks!

Upvotes: 0

Views: 1894

Answers (4)

adeneo
adeneo

Reputation: 318342

$(function() {
    $('#BC, #AB').hide();

    $('.prov').click(function() {
        $('#'+this.id.replace('-show','')).toggle('slow').siblings('div').hide('slow');
        return false;
    });
});

FIDDLE

There's no need for two DOM ready functions, and the first function bound to the class hides the elements, and the second function bound to the ID toggles the elements, which by now are of course hidden, and will always be shown.

Upvotes: 0

krichard
krichard

Reputation: 3694

What happens if you click the show links is that the divs get hidden and than you call toggle which basically shows the div again each time. Therefor the desired effect doesnt show. So just leave out the following:

Update:

            $(document).ready(function () {

                $('#BC, #AB').hide();
                $('#BC-show').click(function () {
                    $('.clearfix:visible').not('#BC').hide()
                        $('#BC').toggle('slow');
                        return false;
                });
                $('#AB-show').click(function () {
                    $('.clearfix:visible').not('#AB').hide()
                        $('#AB').toggle('slow');
                        return false;
                });
            });

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

You seem to be attaching two events to each element.

One using className Another using ID

Try this code

$(function() {
    $(document).ready(function() {
        $('#BC, #AB').hide();

        $(".prov").click(function() {
            var id = $(this).attr('id').split('-')[0];
            $('.clearfix').not('#'+id).hide();
            $('#' + id).toggle('slow');
            return false;
        });
    });
});​

Check Fiddle

Just attach the event using the class and get the id from it and use it to toggle.

Upvotes: 3

Ivan
Ivan

Reputation: 10392

I appears that your first event handler is hiding the element, and then toggle is being called. Thus, toggle shows the element, since $(".prov").click(function(){ $(".clearfix").hide(); }); is hiding it.

Upvotes: 0

Related Questions