[Solved] Hiding a visible item with jQuery
Posted: Wed Jan 25, 2012 5:38 pm
Sorry about the misleading subject line but i'm not sure how to word this in such a short space.
In the HTML code below, if i click on "Header One" then "Content One" is displayed, if i click on "Header Two" the text "Content One" slides up and the text "Content Two" slides down and is displayed. The Problem is, if i do click on "Header Two" again, the content slides up but immediately after closing, slides down again. How can i remedy this issue?
My jQuery code
My HTML code
In the HTML code below, if i click on "Header One" then "Content One" is displayed, if i click on "Header Two" the text "Content One" slides up and the text "Content Two" slides down and is displayed. The Problem is, if i do click on "Header Two" again, the content slides up but immediately after closing, slides down again. How can i remedy this issue?
My jQuery code
Code: Select all
$(document).ready(function() {
$('h2.tandc_header').click(function() {
$('p.tandc_content').slideUp();
$(this).next('p.tandc_content').slideToggle();
});
});
Code: Select all
<h2 class="tandc_header">Header One</h2>
<p class="tandc_content">Content One</p>
<!-- -->
<h2 class="tandc_header">Header Two</h2>
<p class="tandc_content">Content Two</p>