"
Team:UT Dallas/Team
From 2013.igem.org
(Difference between revisions)
| Line 2: | Line 2: | ||
<html> | <html> | ||
| - | < | + | <style> |
| - | + | ||
| + | .accordion { | ||
| + | margin: 50px; | ||
| + | dt, dd { | ||
| + | padding: 10px; | ||
| + | border: 1px solid black; | ||
| + | border-bottom: 0; | ||
| + | &:last-of-type { | ||
| + | border-bottom: 1px solid black; | ||
| + | } | ||
| + | a { | ||
| + | display: block; | ||
| + | color: black; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | } | ||
| + | dd { | ||
| + | border-top: 0; | ||
| + | font-size: 12px; | ||
| + | &:last-of-type { | ||
| + | border-top: 1px solid white; | ||
| + | position: relative; | ||
| + | top: -1px; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </style> | ||
| + | |||
<div id="bottom-panel"> | <div id="bottom-panel"> | ||
| - | + | <dl class="accordion"> | |
| - | + | ||
| - | + | <dt><a href="">Panel 1</a></dt> | |
| - | + | <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> | |
| - | + | ||
| - | + | <dt><a href="">Panel 2</a></dt> | |
| - | + | <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd> | |
| - | + | ||
| - | + | <dt><a href="">Panel 3</a></dt> | |
| - | + | <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd> | |
| - | + | ||
| - | + | </dl> | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
</div> | </div> | ||
| + | <script> | ||
| + | (function($) { | ||
| + | |||
| + | var allPanels = $('.accordion > dd').hide(); | ||
| + | |||
| + | $('.accordion > dt > a').click(function() { | ||
| + | allPanels.slideUp(); | ||
| + | $(this).parent().next().slideDown(); | ||
| + | return false; | ||
| + | }); | ||
| - | + | })(jQuery); | |
| - | + | </script> | |
</html> | </html> | ||
Revision as of 21:46, 6 September 2013
- Panel 1
- Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
- Panel 2
- Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
- Panel 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
