Using JQuery to toggle div visibility

Question

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

Answer 1

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>