Solved

Have multipe jquery accordions within a tab set

Posted on 2013-11-11
3
534 Views
Last Modified: 2013-11-12
I have three tabs where each tab has an accordion in it.  I have that working except for the variables.  I had;
$(function() {
            $( "#accordion" ).accordion({
            autoHeight:false,
            collapsible:true,
            active:true,
            heightStyle:"content",
            animate:{easing: "linear"}
      });

set initionally and it was working great as one.  Now I added three of them so I;
jQuery(document).ready(function(){
      
      $("#accordion").accordion();
      $("#accordion2").accordion();
      $("#accordion3").accordion();            

});      

My question is how to get the variables working with all three of these.  The page code is here.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>Test</title>
	<link href="theme/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	<script src="theme/js/jquery-1.9.1.js"></script>
	<script src="theme/js/jquery-ui-1.10.3.custom.js"></script>
	<script>
	
jQuery(document).ready(function(){
	
	$("#accordion").accordion();
	
	$("#accordion2").accordion();

	$("#accordion3").accordion();		

});		
			
	</script>
	<style>
	body{
		font: 62.5% "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	
	</style>
</head>

<body>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">First</a></li>
		<li><a href="#tabs-2">Second</a></li>
		<li><a href="#tabs-3">Third</a></li>
	</ul>
	<div id="tabs-1"><div id="accordion">
	<h3>First</h3>
	<div>
	  <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
	  <p>asdfd</p>
	  <p>asdfad</p>
	  <p>adfa</p>
	  <p>&nbsp;</p>
	</div>
	<h3>Second</h3>
	<div>
	  <p>Phasellus mattis tincidunt nibh.</p>
	  <p>asdf</p>
	</div>
	<h3>Third</h3>
	<div>Nam dui erat, auctor a, dignissim quis.</div>
</div></div>
	<div id="tabs-2"><div id="accordion2">
	<h3>First</h3>
	<div>
	  <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
	  <p>asdf</p>
	  <p>df</p>
	  <p>df</p>
	  <p>df</p>
	</div>
	<h3>Second</h3>
	<div>Phasellus mattis tincidunt nibh.</div>
	<h3>Third</h3>
	<div>
	  <p>Nam dui erat, auctor a, dignissim quis.dsaf</p>
	  <p>dfdasfsfagg</p>
	  <p>adf</p>
	</div>
</div></div>
	<div id="tabs-3"><div id="accordion3">
	<h3>First</h3>
	<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	<h3>Second</h3>
	<div>
	  <p>Phasellus mattis tincidunt nibh.</p>
	  <p>&nbsp;</p>
	  <p>asdfd</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>df</p>
	</div>
	<h3>Third</h3>
	<div>Nam dui erat, auctor a, dignissim quis.</div>
</div></div>
</div>
</body>
</html>

Open in new window

     

Thank you
0
Comment
Question by:solsticeint
  • 2
3 Comments
 
LVL 2

Accepted Solution

by:
goubun earned 500 total points
ID: 39640791
If I understand fine, you can use the same class for three divs, something like

<div id="accordion" class="acc"> and use:

jQuery(document).ready(function(){
            $( ".acc" ).accordion({
            autoHeight:false,
            collapsible:true,
            active:true,
            heightStyle:"content",
            animate:{easing: "linear"}
      });
});
0
 

Author Comment

by:solsticeint
ID: 39641404
Perfect!  Thank you
0
 

Author Closing Comment

by:solsticeint
ID: 39641405
Thank you
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)

758 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

22 Experts available now in Live!

Get 1:1 Help Now