Using JQuery to toggle div visibility

css, html, javascript, jquery

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>

Problem

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

Original source