Using JQuery to toggle div visibility

Issue

I'm writing some jquery code to toggle a Div visibility. I followed the method posted here: http://jsfiddle.net/Ga7Jv/.

When the user clicks an image (next to a H2 tag) i want it to toggle 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>

The is css applied to the class expander and when i click the button it appears that the css changes, as i would expect. So i assume the code is finding the toggle button and switching out the classes alright.

However it doesn't perform the action i need, which is to slide the div up or down depending on that class.

The other way i've tried to achieve this is with this:

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

This only closes the div and does not open again when i click it. I've also had it so it closes fine but when i open it, it immediately closes again.

Thanks

Solution

Problem with your code is that its last function call is .hide(), thus it will always hide the div

Simply use .toggle(), it display or hide the matched elements.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h3><img src="toggle.png" class="expander" alt="Expand" />
</h3>

<div id="TableData">The Core Knowledge Sequence UK is a guideline of the fundamental skills and content to cover in English, maths, history and geography, science, music and visual arts.</div>
<p class="traversing"></p>

OR

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

You can use .slideToggle(), if you want to display or hide the matched elements with a sliding motion

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<h3><img src="toggle.png" class="expander" alt="Expand" />
</h3>

<div id="TableData">The Core Knowledge Sequence UK is a guideline of the fundamental skills and content to cover in English, maths, history and geography, science, music and visual arts.</div>
<p class="traversing"></p>

Answered By - Satpal