Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 655
  • Last Modified:

JQuery - Toggle Dynamic Content (Code Example Provided)

Hello All;

In this code, we can toggle 2 Fieldset's
However, when you click on either of the 2, they will both toggle down.
I need to only toggle the one that is clicked on.

Any assistance on this would be great.

Additional note:
This is just a test, there could be 2 - 50 of these, so it has to be completely dynamic.

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){
$( ".clickit" ).click(function() {
  $( "p" ).slideToggle( "slow" );
  $(".BandHolder").toggleClass("shrunk");
});
});
//]]> 
</script>
<style type="text/css">
p{
	display:none;
}
.BandHolder{
	width:30%;
}
.shrunk{
	width:95%;
}
</style>
</head>

<body>
<ul>


<li>
<fieldset class="BandHolder" id="1" style="background-color:#000; color:#999;">
<legend><span><div class="clickit">Show 1</div></button></span></legend>
<p class="Show">
<span style="font-family:Georgia; font-size:10pt;">Information for the top 1 goes here</span>

</p></fieldset>
</li>


<li>
<fieldset class="BandHolder" id="2" style="background-color:#000; color:#999;">
<legend><span><div class="clickit">Show 2</div></button></span></legend>
<p class="Show">
<span style="font-family:Georgia; font-size:10pt;">Information for the bottom 2 goes here</span>
</p></fieldset>
</li>
</ul>


</body>
</html>

Open in new window


Thanks
Carrzkiss
0
Wayne Barron
Asked:
Wayne Barron
  • 2
1 Solution
 
Tom BeckCommented:
How about this:
<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){
$( ".clickit" ).click(function() {
  $(this).parents().next("p").slideToggle( "slow" );
  $(this).parents(".BandHolder").toggleClass("shrunk");
});
});
//]]> 
</script>

Open in new window

B.T.W., you have a </button> with no opening tag.
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Thanks a BUNCH!!!!!!!!!!!
Yea, that Button got removed, as I replaced it with the DIV tag instead, and did not get it all moved out.

Once again, Thanks
You Rock!

Carrzkiss
0
 
Tom BeckCommented:
You're welcome. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now