"
User:Sifuentes anita
From 2014.igem.org
(Difference between revisions)
| Line 89: | Line 89: | ||
} | } | ||
| - | . | + | /* styling for menu options |
| + | .menuHeader{ | ||
background: #d3d3d3; | background: #d3d3d3; | ||
margin: 5px 0 0 0; | margin: 5px 0 0 0; | ||
| Line 143: | Line 144: | ||
<div id="menuWrap"> | <div id="menuWrap"> | ||
| - | < | + | <h3 class="menuHeader">Section 1</h2> |
<div class="accordion-content"> | <div class="accordion-content"> | ||
<ul> | <ul> | ||
| Line 150: | Line 151: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | <h3 class=" | + | <h3 class="menuHeader">Section 2</h2> |
<div class="accordion-content"> | <div class="accordion-content"> | ||
<ul> | <ul> | ||
| Line 159: | Line 160: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | <h3 class=" | + | <h3 class="menuHeader">Section 3</h2> |
<div class="accordion-content"> | <div class="accordion-content"> | ||
<ul> | <ul> | ||
| Line 196: | Line 197: | ||
{ | { | ||
//Add Inactive Class To All Accordion Headers | //Add Inactive Class To All Accordion Headers | ||
| - | $('. | + | $('.menuHeader').toggleClass('inactive-header'); |
//Set The Accordion Content Width | //Set The Accordion Content Width | ||
| - | var contentwidth = $('. | + | var contentwidth = $('.menuHeader').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 | ||
| - | $('. | + | $('.menuHeader').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 | ||
| - | $('. | + | $('.menuHeader').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:11, 7 January 2015
left
right
