Accordion using css

Total Views : 356
Zoom In Zoom Out Read Later Print

Create accordion using html and css.

accordion.html

<html>
<head>
<title>Accordion</title>
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Main CSS (Not needed, only for demo purpose) -->
<link rel="stylesheet" href="css/main.css">
<!-- Accordian CSS -->
<link rel="stylesheet" href="css/accordion.css">
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- bootstrap.min.js -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<main class="site-content">
<section class="sec-spacer sec-color">
<div class="container container-center">
<div class="row">
<div class="col-md-2">
<h3 class="title">Style 1</h3>
</div>
<div class="col-md-8">
<div class="pd-accordion pd-accordion-style1" id="accordion1">
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse4" class="collapsed">Ttile 1</a>
</h4>
<div id="collapse4" class="panel-collapse collapse in">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse5">Ttile 2</a>
</h4>
<div id="collapse5" class="panel-collapse collapse">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse6">Ttile 3</a>
</h4>
<div id="collapse6" class="panel-collapse collapse">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sec-spacer">
<div class="container container-center">
<div class="row">
<div class="col-md-2">
<h3 class="title">Style 2</h3>
</div>
<div class="col-md-8">
<div class="pd-accordion pd-accordion-style2" id="accordion2">
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse7" class="collapsed">Ttile 1</a>
</h4>
<div id="collapse7" class="panel-collapse collapse in">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse8">Ttile 2</a>
</h4>
<div id="collapse8" class="panel-collapse collapse">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse9">Ttile 3</a>
</h4>
<div id="collapse9" class="panel-collapse collapse">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sec-spacer sec-color">
<div class="container container-center">
<div class="row">
<div class="col-md-2">
<h3 class="title">Style 3</h3>
</div>
<div class="col-md-8">
<div class="pd-accordion pd-accordion-style3" id="accordion3">
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapse10" class="collapsed">Ttile 1</a>
</h4>
<div id="collapse10" class="panel-collapse collapse in">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapse11">Ttile 2</a>
</h4>
<div id="collapse11" class="panel-collapse collapse">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
<div class="panel">
<h4 class="acdn-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapse12">Ttile 3</a>
</h4>
<div id="collapse12" class="panel-collapse collapse">
<div class="acdn-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>

accordion.css

@charset "UTF-8";
.pd-accordion .panel {
margin-bottom: 5px;background-color: rgba(0, 0, 0, 0.03);
border: 0;border-radius: 0;
box-shadow: none;
}
.acdn-title {
margin: 0;
}
.acdn-title a {
display: block;position: relative;
padding: 15px;
font-size: 18px;color: #666;
}
.acdn-body {
padding: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.04);
font-size: 13px;
}
.pd-accordion .acdn-title a:after {
position: absolute;
font-family: FontAwesome;content: "\f068";
color: inherit;
font-size: 12px;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.pd-accordion .acdn-title a.collapsed:after {
content: "\f067";
}

/*Style 1 */
.pd-accordion-style1 .panel {
background-color: #fff;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.pd-accordion-style1 .acdn-body {
border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* Style 2 */
.pd-accordion-style2 .panel {
background: transparent;
}
.pd-accordion-style2 .acdn-title a {
background-color: #444;color: #bbb;
}
.pd-accordion-style2 .acdn-body {
background-color: #555;color: #bbb;
}

/* Style 3 */
.pd-accordion-style3 .panel {
background: transparent;
}
.pd-accordion-style3 .acdn-title a {
border-left: 2px solid #444;
background-color: #fff;
}
.pd-accordion-style3 .acdn-body {
background-color: #fff;color: #bbb;
}

See More

Latest Photos