Accordion - Test

by Andrey Dobrovoi

HTML

<div class="demo">
<div class="accordion">
					<section>
						<a href="#acc1" id="acc1">Accordion 1</a>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut 
						enim ad minim.</p>
					</section>
					<section>
						<a href="#acc2" id="acc2">Accordion 2</a>
						<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. 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. 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.</p>
					</section>
					<section>
						<a href="#acc3" id="acc3">Accordion 3</a>
						<p>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. 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. Duis aute irure dolor in 
						reprehenderit.</p>
					</section>
				</div>
 </div>

CSS

/* ---- Accordion ---- */
.accordion {
    width: 100%;
    background: #fff;
	font-size: 14px;
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;            
}

.accordion p{height:0; margin-bottom:-14px; padding:0; color: #888; overflow:hidden;}
.accordion a{
	display:block; 
	height:auto;  
	line-height:28px; 
    background: #6c6e74;
    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
	color: #C9C9C9;
    padding: 5px 22px;
	text-decoration:none; 
	text-align:left; 
	border-bottom:1px solid #525252;
}
.accordion a:hover, .accordion a:focus {opacity: 0.9;color:#E7FFBB;}
.accordion a:active {color:#E7FFBB;}
.accordion :target + p{
	margin: 0;
	padding:10px 15px; 
	height:auto;
	border-left: #eee solid 1px;
    border-right: #eee solid 1px;
    border-bottom: #eee solid 1px;
}
/* demo box position */
.demo {
    width: 400px;
    margin: 15% 20%;
}