Page 1 of 1

[Solved] Hiding a visible item with jQuery

Posted: Wed Jan 25, 2012 5:38 pm
by social_experiment
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

Code: Select all

$(document).ready(function() {	
	$('h2.tandc_header').click(function() {
		$('p.tandc_content').slideUp();
		$(this).next('p.tandc_content').slideToggle();		
	});
});
My HTML code

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>

Re: Hiding a visible item with jQuery

Posted: Wed Jan 25, 2012 6:23 pm
by Celauran

Code: Select all

$(document).ready(function() {
    $('p.tandc_content').hide();
    $('h2.tandc_header').click(function() {
        $(this).next('p.tandc_content').slideToggle();
        $(this).next('p.tandc_content').siblings('p.tandc_content').slideUp();
    });
});

Re: Hiding a visible item with jQuery

Posted: Thu Jan 26, 2012 5:00 am
by social_experiment
Thanks 8)