Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Have multipe jquery accordions within a tab set

Posted on 2013-11-11
3
542 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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)

808 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