accordion css code example
Example 1: html faq
<html>
<body bgcolor="E1C699">
<ul>
<li><strong>What is (WEBSITE)?</strong> <br> <br><em><strong>(WEBSITE)</strong> is a/an (DEATILS).</em><br></li>
<br><li><strong>How do I post a (na)</strong> <br> <br><em>To create a (na), simply, go to the <strong>(website) homepage</strong> and click "Create a (na)"</em></li>
</ul>
<style>
body {
background-color: navy;
}
</style>
</body>
</html>
Example 2: pure css accordion
HTML<div id="container">
<!-- Item 1 -->
<div class="accordion">
<label for="tm" class="accordionitem">
<h2>Item 1 <span class="arrow">»</span></h2></label>
<input type="checkbox" id="tm"/>
<p class="hiddentext">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
</div>
<!-- Item 2 -->
<div class="accordion">
<label for="tn" class="accordionitem">
<h2>Item 2 <span class="arrow">»</span></h2></label>
<input type="checkbox" id="tn"/>
<p class="hiddentext">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
</div>
<!-- Item 3 -->
<div class="accordion">
<label for="to" class="accordionitem">
<h2>Item 3 <span class="arrow">»</span></h2></label>
<input type="checkbox" id="to"/>
<p class="hiddentext">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
</div>
</div>
Example 3: pure css accordion
CSS#container{
width: 400px;
height: auto;
margin: 0 auto;
margin-top: 3%;
border-top: 1px solid #bdbdbd;
border-left: 1px solid #bdbdbd;
border-right: 1px solid #bdbdbd;
}
.accordion label{
display:block;
background-color: #eeeeee;
padding: 10px;
color: #424242;
text-shadow: 0 0 2px rgba(255,255,255,0.6);
cursor: pointer;
border-bottom: 1px solid #bdbdbd;
border-top: 1px solid #ffffff;
}
.accordion p{
color: #424242;
padding: 10px;
font-size: 0.8em;
line-height: 1.7em;
border-bottom: 1px solid #bdbdbd;
visibility: hidden;
opacity: 0;
display: none;
text-align: left;
background-color: #fff;
margin-top: 0px;
}
#tm:checked ~ .hiddentext{
display: block;
visibility: visible;
opacity: 1;
}
input#tm{
display: none;
position: relative;
}
#tn:checked ~ .hiddentext{
display: block;
visibility: visible;
opacity: 1;
}
input#tn{
display: none;
position: relative;
}
#to:checked ~ .hiddentext{
display: block;
visibility: visible;
opacity: 1;
}
input#to{
display: none;
position: relative;
}
Example 4: jacascript faq script
jacascript faq script