Jquery Accordion
Jquery Accordion
I'm trying to create and accordion, I would like to do it with out the jquery ui version.
So far I've managed to do it, but I would like the second option to be open instead of all of them.
Here is the JsFiddle: JSFIDDLE
Here is my html
- <div class="tabbed-single-wrapper">
<a href="javascript:void(0);" class="tab-header">
<div class="max-width">
<h2>Tab 1</h2>
</div>
</a>
<div class="tab-content">
<div class="max-width phase2">
<div class="heading">
<p>Heading 1</p>
</div>
<div class="content">
<p>content 1</p>
</div>
</div>
</div>
</div>
<div class="tabbed-single-wrapper">
<a href="javascript:void(0);" class="tab-header">
<div class="max-width">
<h2>Tab 2</h2>
</div>
</a>
<div class="tab-content">
<div class="max-width phase2">
<div class="heading">
<p>Heading 2</p>
</div>
<div class="content">
<p>content 2</p>
</div>
</div>
</div>
</div>
<div class="tabbed-single-wrapper">
<a href="javascript:void(0);" class="tab-header">
<div class="max-width">
<h2>Tab 3</h2>
</div>
</a>
<div class="tab-content">
<div class="max-width phase2">
<div class="heading">
<p>Heading 3</p>
</div>
<div class="content">
<p>content 3</p>
</div>
</div>
</div>
</div>
and here is my jquery
- ("."+phaseType).each(function(i, obj) {
$(this).parents(".tabbed-single-wrapper:first").find(".tab-content").slideDown(250);
$(this).parents(".tabbed-single-wrapper:first").find(".tab-header").addClass("init-open");
var whatIndex = $(this).parents(".tabbed-single-wrapper:first").index();
actionLocation.push(getTabName(whatIndex));
});
$("."+phaseType).parents(".tabbed-single-wrapper:first").prevAll().each(function(i, obj) {
$(this).find(".tab-content").slideDown(250);
$(this).find(".tab-header").addClass("init-open");
});
$.getJSON('ajax/actionRequest.php?actionType=load&actionPhase='+phaseType+'&actionLocation='+JSON.stringify(actionLocation));
$(".tab-header").click(function(){
$this = $(this);
var trackVal = $this.find("h2 span").html();
var angle = 0;
if($(this).parent().find(".tab-content").css("display") == "none"){
angle = 90;
$(this).parent().find(".tab-content").slideDown(250);
$(this).find("h2 img").css( 'transform', 'rotate(' + angle + 'deg)' );
$(this).find("h2 img").css( '-moz-transform', 'rotate(' + angle + 'deg)' );
$(this).find("h2 img").css( '-webkit-transform', 'rotate(' + angle + 'deg)' );
$(this).find("h2 img").css( '-o-transform', 'rotate(' + angle + 'deg)' );