User:Sifuentes anita
From 2014.igem.org
(Difference between revisions)
Line 174: | Line 174: | ||
<div id="featureBoxLeft"><p> something </p> </div> | <div id="featureBoxLeft"><p> something </p> </div> | ||
<div id ="clear"></div> | <div id ="clear"></div> | ||
+ | |||
<div id="menuWrap"> | <div id="menuWrap"> | ||
<h3 class="accordion-header">Section 1</h3> | <h3 class="accordion-header">Section 1</h3> | ||
Line 201: | Line 202: | ||
</ul> | </ul> | ||
</div> | </div> | ||
- | </div> | + | </div> <!-- this closes the menu div --> |
- | </div> | + | </div><!-- this closes the left side of the page --> |
- | |||
- | |||
- | |||
<div id="rightColumn"> | <div id="rightColumn"> | ||
Line 223: | Line 221: | ||
<!-- jquery for the menu --> | <!-- jquery for the menu --> | ||
- | <script ="text/javascript"> | + | <script ="text/javascript"> |
- | $(document).ready(function() | + | $(document).ready(function() { |
- | { | + | //Add Inactive Class To All Accordion Headers |
- | + | $('.accordion-header').toggleClass('inactive-header'); | |
- | + | ||
- | + | //Set The Accordion Content Width | |
- | + | var contentwidth = $('.accordion-header').width(); | |
- | + | $('.accordion-content').css({'width' : contentwidth }); | |
- | + | //Open The First Accordion Section When Page Loads | |
- | + | $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header'); | |
- | + | $('.accordion-content').first().slideDown().toggleClass('open-content'); | |
- | + | // The Accordion Effect | |
- | + | $('.accordion-header').click(function () { | |
- | + | if($(this).is('.inactive-header')) { | |
- | + | $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); | |
- | + | $(this).toggleClass('active-header').toggleClass('inactive-header'); | |
- | + | $(this).next().slideToggle().toggleClass('open-content'); | |
- | + | } | |
- | + | else { | |
- | + | $(this).toggleClass('active-header').toggleClass('inactive-header'); | |
- | + | $(this).next().slideToggle().toggleClass('open-content'); | |
- | + | } | |
- | + | }); | |
- | + | return false; | |
- | }); | + | }); |
- | </script> | + | </script> |
<!-- end of html --> | <!-- end of html --> | ||
</html> | </html> |
Revision as of 20:14, 7 January 2015
something
right