Using jQuery to switch div visibility

Question

I am writing jquery code to switch the visibility of a Div. I followed the method posted here: http://jsfiddle.net/Ga7Jv/ .

When the user clicks the image (next to the H2 tag), I want him to switch the div.

Here is the jQuery:

$(function()
{
$(".expander").live('click', function(){
        $(this).next("#TableData").slideDown();
        $(this).removeClass('expander');
        $(this).addClass('expanded');
});

$(".expanded").live('click', function(){
        $(this).next("#TableData").slideUp();
        $(this).removeClass('expanded');
        $(this).addClass('expander');
});

Here is the HTML:

<h3><img src="toggle.png" class ="expander" alt="Expand"/> 
Tabular Data</h3>
<div id="TableData">
//Content
</div>

Css is applied to the class extender, and when I click the button, it appears that css changes as expected. Therefore, I assume that the code finds a toggle button and automatically switches classes.

However, it does not perform the action I need to shift the div up or down depending on this class.

Another way I tried to achieve this is as follows:

  $(function(){
     $('.expander').live('click',function(){
     $('#TableData').show();
     $('#TableData').hide();
        });

div , . , , , .

Answer 1

, .hide(), div

.toggle(), .

$(function(){
    $('.expander').live('click',function(){
        $('#TableData').toggle();
    });
});

Fiddle

$(function () {
    $('.expander').live('click', function () {
        $('#TableData').slideToggle();
    });
});

.slideToggle(),

Answer 2

, .

:

$(function(){
    $(".toggler").on("click", function(){
        $(this)
        .toggleClass("expander expanded")
        .parent().next().slideToggle();
    });
});

:

• .toggler , .expander .expanded.

• , slideToggle. #TableData .parent().next().

Working Demo: http://jsfiddle.net/ashishanexpert/nuw2M/1/

Answer 3

div, .

, .toggle(), jQuery .

Answer 4

, div div.

div div

$('.toggle').click(function(){ $('.showMe').slideToggle('slow'); });