User:Sifuentes anita

From 2014.igem.org

(Difference between revisions)
Line 102: Line 102:
}
}
 +
 +
 +
#accordion-container {
 +
font-size: 13px;
 +
background: #ffffff;
 +
padding: 5px 10px 10px 10px;
 +
border: 1px solid #cccccc;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
border-radius: 5px;
 +
-moz-box-shadow: 0 5px 15px #cccccc;
 +
-webkit-box-shadow: 0 5px 15px #cccccc;
 +
box-shadow: 0 5px 15px #cccccc;
 +
}
 +
 +
.accordion-header {
 +
font-size: 16px;
 +
background: #ebebeb;
 +
margin: 5px 0 0 0;
 +
padding: 5px 20px;
 +
border: 1px solid #cccccc;
 +
cursor: pointer;
 +
color: #666666;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
 +
.active-header {
 +
-moz-border-radius: 5px 5px 0 0;
 +
-webkit-border-radius: 5px 5px 0 0;
 +
border-radius: 5px 5px 0 0;
 +
background: url(images/active-header.gif) #cef98d;
 +
background-repeat: no-repeat;
 +
background-position: right 50%;
 +
}
 +
 +
.active-header:hover {
 +
background: url(images/active-header.gif) #c6f089;
 +
background-repeat: no-repeat;
 +
background-position: right 50%;
 +
}
 +
 +
.inactive-header {
 +
background: url(images/inactive-header.gif) #ebebeb;
 +
background-repeat: no-repeat;
 +
background-position: right 50%;
 +
}
 +
 +
.inactive-header:hover {
 +
background: url(images/inactive-header.gif) #f5f5f5;
 +
background-repeat: no-repeat;
 +
background-position: right 50%;
 +
}
 +
 +
.accordion-content {
 +
display: none;
 +
padding: 20px;
 +
background: #ffffff;
 +
border: 1px solid #cccccc;
 +
border-top: 0;
 +
-moz-border-radius: 0 0 5px 5px;
 +
-webkit-border-radius: 0 0 5px 5px;
 +
border-radius: 0 0 5px 5px;
 +
}
Line 115: Line 180:
<div id="leftColumn"> <p>left</p>
<div id="leftColumn"> <p>left</p>
-
<ul>
+
-
<li> <label for="menu-toggle">First option</label>
+
      <div id="accordion-container">  
-
<input type="checkbox" id="menu-toggle"/>
+
    <h2 class="accordion-header">Section 1</h2>  
-
<ul id="menu">
+
    <div class="accordion-content">  
-
<li><a href="#">First link</a></li>
+
          <p>Section 1 Content</p>  
-
<li><a href="#">Second link</a></li>
+
    </div>  
-
<li><a href="#">Third link</a></li>
+
    <h2 class="accordion-header">Section 2</h2>  
-
</ul> </li>
+
    <div class="accordion-content">  
 +
          <p>Section 2 Content</p>  
 +
    </div>  
 +
</div>
-
<li><label for="menu-toggle">second option</label>
 
-
<input type="checkbox" id="menu-toggle"/>
 
-
<ul id="menu">
 
-
<li><a href="#">First link</a></li>
 
-
<li><a href="#">Second link</a></li>
 
-
<li><a href="#">Third link</a></li>
 
-
</li>
 
-
</ul>
 
-
</ul>
 
</div>  
</div>  
Line 145: Line 204:
 +
 +
<script ="text/javascript">
 +
$(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>
<!-- end of html -->
<!-- end of html -->
</html>
</html>

Revision as of 16:58, 7 January 2015

left

Section 1

Section 1 Content

Section 2

Section 2 Content

right

Retrieved from "http://2014.igem.org/User:Sifuentes_anita"