Solved

JQuery - Toggle Dynamic Content (Code Example Provided)

Posted on 2014-02-23
3
532 Views
Last Modified: 2014-02-23
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
Comment
Question by:Wayne Barron
  • 2
3 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39881470
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
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 39881483
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39881489
You're welcome. Thanks for the points.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now