Wayne Barron
asked on
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.
Thanks
Carrzkiss
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>
Thanks
Carrzkiss
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You're welcome. Thanks for the points.
ASKER
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