"
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
