Question

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!

Answer 1

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.