Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-us" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-us" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-us" class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en-us"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Animated CSS3 Horizontal Accordion</title>
<style>
/* Begin Animated CSS3 Horizontal Accordion */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Martin Ivanov : http://wemakesites.net : Creative Commons License == */
.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
{
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 > input
{
opacity: 0; /* we hide the radio button with opacity and position: absolute in order to preserve the keyboard arrow navigation */
}
.acidjs-horizontal-accordion > form > ul > li > div
{
width: 0;
font-size: 10px;
color: #fff;
margin: 0 -32px 0 32px;
-webkit-transition: width .3s cubic-bezier(.09, .11, .24, .91);
-moz-transition: width .3s cubic-bezier(.09, .11, .24, .91);
-ms-transition: width .3s cubic-bezier(.09, .11, .24, .91);
-o-transition: width .3s cubic-bezier(.09, .11, .24, .91);
transition: width .3s cubic-bezier(.09, .11, .24, .91);
}
.acidjs-horizontal-accordion > form > ul > li > input:checked ~ div
{
width: 220px;
padding: 8px;
overflow: auto;
}
</style>

</head>
<body>

<div style="text-align:center;font-family:verdana,arial;"><h1>Animated CSS3 Horizontal Accordion</h1></div>

<div class="html-chunk">
<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>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-03" />
<label for="group-01-03">Customers</label>
<div>
<h3>Customers</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-04" />
<label for="group-01-04">Contact Us</label>
<div>
<h3>Contact 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-05" />
<label for="group-01-05">Achievements</label>
<div>
<h3>Achievements</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-06" />
<label for="group-01-06">Portfolio</label>
<div>
<h3>Portfolio</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>
</ul>
</form>
</div>
</div>

<br /><br />
<div class="notes">Click the tabs above to preview the effect.</div>

<br /><br />
<div class="notes">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_255.html">Animated CSS3 Horizontal Accordion Code Snippet</a> page. ]
</div>

</body>
</html>