<div class="acidjs-horizontal-accordion">
<form>
<ul>
<li>
<input type="radio" name="group-01" id="group-01-01" />
<label for="group-01-01">About Us</label>
<div>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-02" checked="checked" />
<label for="group-01-02">Our Mission</label>
<div>
<h3>Our Mission</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-03" />
<label for="group-01-03">Customers</label>
<div>
<h3>Customers</h3>
<p>Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-04" />
<label for="group-01-04">Contact Us</label>
<div>
<h3>Contact Us</h3>
<p>Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-05" />
<label for="group-01-05">Achievements</label>
<div>
<h3>Achievements</h3>
<p>Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.</p>
</div>
</li>
<li>
<input type="radio" name="group-01" id="group-01-06" />
<label for="group-01-06">Portfolio</label>
<div>
<h3>Portfolio</h3>
<p>At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum
et dolorum fuga. </p>
</div>
</li>
</ul>
</form>
</div>
<!-- <p class="options-block">Looking for enterprise HTML5, CSS3 and JavaScript web controls?
Check <a href="http://wemakesites.net/" target="_blank">AcidJs.WebUI</a>.</p>-->
/*
* Animated CSS3 Only Horizontal Accordion by Martin Ivanov (@wemakesitesnet)
* @version 1.0
* @author Martin Ivanov
* @url portfolio http://wemakesites.net/
* @url twitter https://twitter.com/wemakesitesnet
* @url blog http://acidmartin.wordpress.com/
**/
/*
* Do you like this solution? Please, donate:
* https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
**/
.acidjs-horizontal-accordion,
.acidjs-horizontal-accordion > form > ul > li > div,
.acidjs-horizontal-accordion > form > ul > li > label
{
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.acidjs-horizontal-accordion > form > ul,
.acidjs-horizontal-accordion > form > ul > *
{
margin: 0;
padding: 0;
list-style: none;
}
.acidjs-horizontal-accordion > form > ul,
.acidjs-horizontal-accordion > form > ul > li > div
{
height: 159px; /* height of the accordion */
}
.acidjs-horizontal-accordion,
.acidjs-horizontal-accordion > form > ul > li > input:checked + label
{
background: #2f343a;
}
.acidjs-horizontal-accordion > form > ul > li > input,
.acidjs-horizontal-accordion > form > ul > li > label
{
position: absolute;
}
.acidjs-horizontal-accordion > form > ul > li,
.acidjs-horizontal-accordion > form > ul > li:last-child
{
border: solid 1px rgba(255,255, 255, .75);
}
.acidjs-horizontal-accordion > form > ul > li > div,
.acidjs-horizontal-accordion > form > ul > li > input
{
opacity: 0; /* we hide the radio button with opacity and position: absolute in order to preserve the keyboard arrow navigation */
}
.acidjs-horizontal-accordion
{
width: 964px;
font-family: Arial, Helvetica, Sans-serif;
padding: 1px;
cursor: default;
}
.acidjs-horizontal-accordion > form > ul > li > label
{
display: block;
width: 159px; /* height of the accordion button */
padding: 0 8px;
letter-spacing: 1px;
font: bold 14px/32px "Arial Rounded MT", Arial, Helvetica, Sans-serif;
background: #e74c3c;
color: #fff;
text-align: right;
cursor: pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-moz-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-ms-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-o-transition: all .3s cubic-bezier(.09, .11, .24, .91);
transition: all .3s cubic-bezier(.09, .11, .24, .91);
-webkit-transform: translateX(-100%) rotate(-90deg);
-moz-transform: translateX(-100%) rotate(-90deg);
-ms-transform: translateX(-100%) rotate(-90deg);
-o-transform: translateX(-100%) rotate(-90deg);
transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.acidjs-horizontal-accordion > form > ul > li > input:not(:checked) + label:hover
{
background: #e02f1c;
}
.acidjs-horizontal-accordion > form > ul > li > input:checked + label
{
border-bottom-color: transparent;
color: rgba(255, 255, 255, .5);
}
.acidjs-horizontal-accordion > form > ul > li
{
float: left;
padding: 0 32px 0 0;
border-right: 0;
}
.acidjs-horizontal-accordion > form > ul > li > div
{
width: 0;
font-size: 10px;
color: #fff;
margin: 0 -32px 0 32px;
-webkit-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-moz-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-ms-transition: all .3s cubic-bezier(.09, .11, .24, .91);
-o-transition: all .3s cubic-bezier(.09, .11, .24, .91);
transition: all .3s cubic-bezier(.09, .11, .24, .91);
}
.acidjs-horizontal-accordion > form > ul > li > input:checked ~ div
{
width: 763px; /* the width of the expanded panel */
padding: 8px;
overflow: auto;
opacity: 1;
}
.acidjs-horizontal-accordion > form > ul > li > div h3
{
font: inherit;
font-size: 14px;
border: 0;
}
.acidjs-horizontal-accordion > form > ul > li > div h3,
.acidjs-horizontal-accordion > form > ul > li > div p
{
color: #fff;
}
.acidjs-horizontal-accordion > form > ul > li > div p
{
font-size: 11px;
}