jQuery manual toggle not working

Question

Hi, I am trying to create a manual toggle to hide some div tags. But it doesn't seem to be doing anything. I added alerts to see if they even show up, but to no avail. Using the simple toggle(); function DOES work.

In fact I am actually trying to work out how to show or hide all divs. Because at the moment, if some divs are open and some divs are closed, using toggle just swaps them over (so divs showing are hidden, and hidden divs are now showing). Any ideas?

//button to show/hide rows
    $('#hideRows').live('click', function() {
        $('.dragbox').each(function(){
            //$(this).find('.dragbox-content').toggle();
            $(this).find('.dragbox-content').toggle(
                function () {
                    //$(this).css({"display":"none"});
                    alert("hide");
                },
                function () {
                    //$(this).css({"display":"block"});
                    alert("show");
                }
            );
        });
    });

Answer 1

If you have something like:

<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
<div id='div4'>
    <div id='div5'></div>
</div>

and css like:

.hideDiv
{
  display: none;
}

You can do stuff like

$('#div1').addClass('hideDiv'); //hides the div
$('#div2').toggle('hideDiv');// toggles hidden or not hidden
$('#div4').children('div').addClass('hideDiv');// hides the child

Put those in functions, complex selectors or whatever you need like:

$('#div3').hover(
        function()
        {
            $('#div1').addClass('hideDiv');
        },
        function()
        {
            $('#div1').removeClass('hideDiv');

        }
    );

For some fun, toggle two divs based on the hover of another:

$('#div3').hover( 
        function() 
        { 
            $('#div1').addClass('hideDiv'); 
           $('#div2').removeClass('hideDiv'); 

        }, 
        function() 
        { 
            $('#div1').removeClass('hideDiv'); 
            $('#div2').addClass('hideDiv'); 
        } 
    ); 

NOTE for another option .toggle() becomes .toggleClass() for this.

Answer 2

Hi WastedSpace.

You seem to rebind the pseudo event handler toggle over and over again. Try this:

$('.dragbox .dragbox-content').toggle(
    function () {
        $(this).css({"display":"none"});
    }, function () {
        $(this).css({"display":"block"});
 });

$('#hideRows').live('click', function() {
    $('.dragbox .dragbox-content').click();
});