Solved

JQuery - Toggle Dynamic Content (Code Example Provided)

Posted on 2014-02-23
3
541 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
unable to set breakpoints in chrome source tab 1 31
Angular- another way of coding hide and display 3 39
Error in JQuery 5 39
Jquery get each value 2 15
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
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)

920 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

13 Experts available now in Live!

Get 1:1 Help Now