"
User:Sifuentes anita
From 2014.igem.org
(Difference between revisions)
| Line 89: | Line 89: | ||
} | } | ||
| - | + | .accordion-header { | |
| - | . | + | |
background: #d3d3d3; | background: #d3d3d3; | ||
margin: 5px 0 0 0; | margin: 5px 0 0 0; | ||
| Line 144: | Line 143: | ||
<div id="menuWrap"> | <div id="menuWrap"> | ||
| - | <h3 class=" | + | <h3 class="accordion-header">Section 1</h2> |
<div class="accordion-content"> | <div class="accordion-content"> | ||
<ul> | <ul> | ||
| Line 151: | Line 150: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | <h3 class=" | + | <h3 class="accordion-header">Section 2</h2> |
<div class="accordion-content"> | <div class="accordion-content"> | ||
<ul> | <ul> | ||
| Line 160: | Line 159: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | <h3 class=" | + | <h3 class="accordion-header">Section 3</h2> |
<div class="accordion-content"> | <div class="accordion-content"> | ||
<ul> | <ul> | ||
| Line 197: | Line 196: | ||
{ | { | ||
//Add Inactive Class To All Accordion Headers | //Add Inactive Class To All Accordion Headers | ||
| - | $('. | + | $('.accordion-header').toggleClass('inactive-header'); |
//Set The Accordion Content Width | //Set The Accordion Content Width | ||
| - | var contentwidth = $('. | + | var contentwidth = $('.accordion-header').width(); |
$('.accordion-content').css({'width' : contentwidth }); | $('.accordion-content').css({'width' : contentwidth }); | ||
//Open The First Accordion Section When Page Loads | //Open The First Accordion Section When Page Loads | ||
| - | $('. | + | $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header'); |
$('.accordion-content').first().slideDown().toggleClass('open-content'); | $('.accordion-content').first().slideDown().toggleClass('open-content'); | ||
// The Accordion Effect | // The Accordion Effect | ||
| - | $('. | + | $('.accordion-header').click(function () { |
if($(this).is('.inactive-header')) { | if($(this).is('.inactive-header')) { | ||
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); | $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); | ||
Revision as of 19:13, 7 January 2015
left
right
