Simple CSS3 Accordion without Javascript

by Posted on

A jQuery liked accordion created by using css3 transition without single line of javascript code. Script written in purely in CSS3 and work smoothly without any third party plugin like jQuery. If you want to quick integrate simple smooth accordion feature on your website with no javascript then you must go through this post for creating simple CSS3 Accordion just few lines of code.

CSS3 Accordion


Creating Simple CSS3 Accordion

The Accordion panel will open on mouse hover and a single panel will be open other will be closed.

HTML

Here is the sample html structure for creating simple css3 based accordion.

<div class="accordion">
			<div class="single-accordion">
				<h2>CSS3 Accordion - Segment # 1</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p>	
			</div>
			<div class="single-accordion">
				<h2>CSS3 Accordion - Segment # 2</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p>	
			</div>
			<div class="single-accordion">
				<h2>CSS3 Accordion - Segment # 3</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p>	
			</div>
			<div class="single-accordion">
				<h2>CSS3 Accordion - Segment # 4</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p>	
			</div>
			<div class="single-accordion">
				<h2>CSS3 Accordion - Segment # 5</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p>	
			</div>
			<div class="single-accordion">
				<h2>CSS3 Accordion - Segment # 6</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p>	
			</div>
		</div>



CSS

Add CSS on page for styling Accordion and write CSS to open Accordion panel on mouse hover event.

.accordion{
	width: 650px;
	padding: 25px;
}
.single-accordion{
	height: 35px;
	overflow: hidden;
	background: #aaa222;
	margin-bottom: 5px;
	padding: 0px 10px;
	-webkit-transition: all 1s;
}
.single-accordion:hover{
	height: 120px;
	border-radius: 10px;
	-webkit-transition: all 1s;
}
.single-accordion h2:hover{
	cursor: pointer;
}
.single-accordion h2{
	color: green;
	font-size: 30px;
	font-variant: small-caps;
	line-height: 35px;
}
.single-accordion p{
	line-height: 25px;
	color: #333;
	text-align: justify;
	padding: 10px;
}

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin