<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Accordion</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h4>Accordion Style : Demo-1</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Section 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-2</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne2">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
Section 1
</a>
</h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
Section 3
</a>
</h4>
</div>
<div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-3</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
Section 1
</a>
</h4>
</div>
<div id="collapseOne3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
Section 3
</a>
</h4>
</div>
<div id="collapseThree3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-4</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion4" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne4">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion4" href="#collapseOne4" aria-expanded="true" aria-controls="collapseOne4">
<i class="icon fa fa-globe"></i>
Section 1
</a>
</h4>
</div>
<div id="collapseOne4" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion4" href="#collapseTwo4" aria-expanded="false" aria-controls="collapseTwo4">
<i class="icon fa fa-briefcase"></i>
Section 2
</a>
</h4>
</div>
<div id="collapseTwo4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion4" href="#collapseThree4" aria-expanded="false" aria-controls="collapseThree4">
<i class="icon fa fa-mobile"></i>
Section 3
</a>
</h4>
</div>
<div id="collapseThree4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-5</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion5" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne5">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion5" href="#collapseOne5" aria-expanded="true" aria-controls="collapseOne5">
Section 1
</a>
</h4>
</div>
<div id="collapseOne5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne5">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion5" href="#collapseTwo5" aria-expanded="false" aria-controls="collapseTwo5">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo5">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion5" href="#collapseThree5" aria-expanded="false" aria-controls="collapseThree5">
Section 3
</a>
</h4>
</div>
<div id="collapseThree5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree5">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-6</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion6" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne6">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapseOne6" aria-expanded="true" aria-controls="collapseOne6">
Section 1
</a>
</h4>
</div>
<div id="collapseOne6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne6">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapseTwo6" aria-expanded="false" aria-controls="collapseTwo6">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo6">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapseThree6" aria-expanded="false" aria-controls="collapseThree6">
Section 3
</a>
</h4>
</div>
<div id="collapseThree6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree6">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-7</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion7" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne7">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion7" href="#collapseOne7" aria-expanded="true" aria-controls="collapseOne7">
Section 1
</a>
</h4>
</div>
<div id="collapseOne7" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne7">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo7">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion7" href="#collapseTwo7" aria-expanded="false" aria-controls="collapseTwo7">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo7">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree7">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion7" href="#collapseThree7" aria-expanded="false" aria-controls="collapseThree7">
Section 3
</a>
</h4>
</div>
<div id="collapseThree7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree7">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-8</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion8" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne8">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion8" href="#collapseOne8" aria-expanded="true" aria-controls="collapseOne8">
Section 1
</a>
</h4>
</div>
<div id="collapseOne8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne8">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo8">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion8" href="#collapseTwo8" aria-expanded="false" aria-controls="collapseTwo8">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree8">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion8" href="#collapseThree8" aria-expanded="false" aria-controls="collapseThree8">
Section 3
</a>
</h4>
</div>
<div id="collapseThree8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree8">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-9</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion9" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne9">
<h4 class="panel-title">
<a class="" role="button" data-toggle="collapse" data-parent="#accordion9" href="#collapseOne9" aria-expanded="true" aria-controls="collapseOne9">
Section 1
</a>
</h4>
</div>
<div id="collapseOne9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne9">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo9">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion9" href="#collapseTwo9" aria-expanded="false" aria-controls="collapseTwo9">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo9">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree9">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion9" href="#collapseThree9" aria-expanded="false" aria-controls="collapseThree9">
Section 3
</a>
</h4>
</div>
<div id="collapseThree9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree9">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div class="container mt-10">
<h4>Accordion Style : Demo-10</h4>
<div class="col-md-12">
<center>
<div class="col-md-6">
<div class="panel-group" id="accordion10" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne10">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion10" href="#collapseOne10" aria-expanded="true" aria-controls="collapseOne10">
Section 1
</a>
</h4>
</div>
<div id="collapseOne10" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne10">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo10">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion10" href="#collapseTwo10" aria-expanded="false" aria-controls="collapseTwo10">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo10">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree10">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion10" href="#collapseThree10" aria-expanded="false" aria-controls="collapseThree10">
Section 3
</a>
</h4>
</div>
<div id="collapseThree10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree10">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</hml>
body{background:#f1f1f2;}
h4{text-align:center;margin:30px 0px;color:#444;}
.mt-10{margin-top:20px;}
a:hover,a:focus{
text-decoration: none;
outline: none;
}
#accordion .panel{
border: none;
border-radius: 3px;
box-shadow: none;
margin-bottom: 15px;
}
#accordion .panel-heading{
padding: 0;
border: none;
border-radius: 3px;
}
#accordion .panel-title a{
display: block;
padding: 12px 15px;
background: #fff;
font-size: 18px;
font-weight: 400;
color: #f81ac1;
/*border: 1px solid #ececec;*/
box-shadow: 0 0 10px rgba(0,0,0,.05);
position: relative;
transition: all 0.5s ease 0s;
box-shadow: 0 1px 2px rgba(43,59,93,0.30);
}
#accordion .panel-title a.collapsed{
box-shadow: none;
color: #676767;
box-shadow: 0 1px 2px rgba(43,59,93,0.30);
}
#accordion .panel-title a:before,
#accordion .panel-title a.collapsed:before{
content: "\f067";
font-family: "Font Awesome 5 Free";
width: 25px;
height: 25px;
line-height: 28px;
font-size: 15px;
font-weight: 900;
color: #f81ac1;
text-align: center;
position: absolute;
top: 8px;
right: 15px;
transform: rotate(135deg);
transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed:before{
color: #676767;
transform: rotate(0);
}
#accordion .panel-title a:after{
content: "";
width: 1px;
height: 100%;
background: #ececec;
position: absolute;
top: 0;
right: 55px;
}
#accordion .panel-body{
padding: 0px 15px;
border: none;
font-size: 15px;
color: #615f5f;
line-height: 27px;
}
/******************* Accordion Demo - 2 *****************/
#accordion2 .panel-title a{
display: block;
padding: 12px 15px 12px 50px;
background: linear-gradient(to bottom, #fefefe, #cdcdcd);
border: 1px solid #c3c3c3;
border-radius: 3px;
font-size: 18px;
font-weight: 400;
color: #676767;
text-shadow: 1px 1px 1px #fff;
position: relative;
}
#accordion2 .panel-title a:before{
content: "\f068";
font-family: "Font Awesome 5 Free";
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #929191;
font-size: 12px;
font-weight: 900;
color: #fdfbfb;
text-align: center;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
text-shadow: none;
position: absolute;
top: 8px;
left: 15px;
}
#accordion2 .panel-title a.collapsed:before{ content: "\f067"; }
#accordion2 .panel-body{
padding: 0px 15px;
font-size: 15px;
color: #222;
line-height: 27px;
border: none;
}
#accordion2 .panel-body p{ margin-bottom: 0; }
/******************* Accordion Demo - 3 *****************/
#accordion3{
padding-left: 80px;
overflow: hidden;
position: relative;
z-index: 1;
}
#accordion3:before{
content: "";
width: 5px;
height: 100%;
background: #004e89;
position: absolute;
top: 0;
left: 22px;
z-index: -1;
}
#accordion3 .panel-title a{
display: block;
padding: 10px 30px 15px 0;
background: #fff;
font-size: 18px;
font-weight: 500;
color: #004e89;
position: relative;
transition: all 0.5s ease 0s;
box-shadow: 0 1px 2px rgba(43,59,93,0.30);
}
#accordion3 .panel-title a:before{
content: "\f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 50px;
height: 50px;
line-height: 40px;
border-radius: 50%;
background: #cad5c2;
text-align: center;
font-size: 17px;
color: #004e89;
border: 6px solid #004e89;
position: absolute;
top: 0;
left: -80px;
}
#accordion3 .panel-title a.collapsed:before{
content: "\f067";
background: #fff;
}
#accordion3 .panel-body{
padding: 0px 15px;
background: #eee;
border: none;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) inset, 0 1px 2px rgba(255, 255, 255, 0.9);
font-size: 14px;
color: #487677;
line-height: 25px;
}
/******************* Accordion Demo - 4 *****************/
#accordion4 .panel{
border: none;
border-radius: 0;
box-shadow: none;
margin: 0 0 10px;
overflow: hidden;
position: relative;
}
#accordion4 .panel-heading{
padding: 0;
border: none;
border-radius: 0;
margin-bottom: 10px;
z-index: 1;
position: relative;
}
#accordion4 .panel-heading:before,
#accordion4 .panel-heading:after{
content: "";
width: 50%;
height: 20%;
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
position: absolute;
bottom: 15px;
left: 10px;
transform: rotate(-3deg);
z-index: -1;
}
#accordion4 .panel-heading:after{
left: auto;
right: 10px;
transform: rotate(3deg);
}
h4.panel-title{margin:10px 0px !important;}
#accordion4 .panel-title a{
display: block;
padding: 15px 70px 15px 70px;
margin: 0;
background: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
color: #d11149;
border-radius: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset;
position: relative;
}
#accordion4 .panel-title a:before,
#accordion4 .panel-title a.collapsed:before{
content: "\f106";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 55px;
height: 100%;
text-align: center;
line-height: 50px;
border-left: 2px solid #D11149;
position: absolute;
top: 0;
right: 0;
}
#accordion4 .panel-title a.collapsed:before{ content: "\f107"; }
#accordion4 .panel-title a .icon{
display: inline-block;
width: 55px;
height: 100%;
border-right: 2px solid #d11149;
font-size: 20px;
color: rgba(0,0,0,0.7);
line-height: 50px;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
#accordion4 .panel-body{
padding: 10px 15px;
margin: 0 0 20px;
border-bottom: 3px solid #d11149;
border-top: none;
background: #fff;
font-size: 15px;
color: #333;
line-height: 27px;
}
/******************* Accordion Demo - 5 *****************/
#accordion5 .panel{
border: none;
border-radius: 0;
box-shadow: none;
margin: 0 0 15px 50px;
}
#accordion5 .panel-title a{
display: block;
padding: 10px 20px 10px 60px;
background: #fe5f55;
border-radius: 30px;
border: 2px solid #fe5f55;
font-size: 20px;
font-weight:400;
color: #fff;
position: relative;
}
#accordion5 .panel-title a.collapsed{
border: 2px solid #bbb;
background: #fff;
color: #bbb;
}
#accordion5 .panel-title a:before,
#accordion5 .panel-title a.collapsed:before{
content: "\f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
background: #fe5f55;
font-size: 18px;
color: #fff;
text-align: center;
border-right: 3px solid #fff;
position: absolute;
top: -10px;
left: -30px;
z-index: 1;
transition: all 0.3s ease 0s;
}
#accordion5 .panel-title a.collapsed:before{
content: "\f067";
background: #bbb;
border: none;
}
#accordion5 .panel-body{
padding: 10px 15px 0;
margin: 0 0 0 30px;
border: none;
font-size: 14px;
color: #333;
line-height: 28px;
position: relative;
}
#accordion5 .panel-body:before{
content: "";
display: block;
width: 5px;
height: 90%;
background: #fe5f55;
position: absolute;
top: 0;
left: -30px;
}
#accordion5 .panel-body:after{
content: "";
border-top: 20px solid #fe5f55;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
position: absolute;
bottom: 0;
left: -48px;
}
/******************* Accordion Demo - 6 *****************/
#accordion6 .panel{
border: 1px solid #bf6026;
border-radius: 0;
box-shadow: none;
margin-left: 50px;
margin-bottom: 12px;
}
#accordion6 .panel-heading{
padding: 0;
background: #fff;
position: relative;
}
#accordion6 .panel-heading:before,
#accordion6 .panel-heading:after{
content: "";
border-right: 8px solid #bf6026;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
position: absolute;
top: 12px;
left: -9px;
}
#accordion6 .panel-heading:after{
border-right: 7px solid #fff;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
position: absolute;
top: 13px;
left: -6px;
}
#accordion6 .panel-title a{
display: block;
padding: 3px 20px 3px 20px;
border: none;
font-size: 20px;
font-weight: 400;
color: #bf6026;
position: relative;
background: #f1f1f2;
}
#accordion6 .panel-title a:before,
#accordion6 .panel-title a.collapsed:before{
content: "\f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 35px;
height: 35px;
line-height: 35px;
font-size: 15px;
color: #bf6026;
text-align: center;
border: 1px solid #bf6026;
position: absolute;
top: 0;
left: -50px;
transition: all 0.5s ease 0s;
}
#accordion6 .panel-title a.collapsed:before{ content: "\f067"; }
#accordion6 .panel-body{
padding: 0 15px 15px;
border: none;
font-size: 14px;
color: #807e7e;
line-height: 28px;
}
#accordion6 .panel-body p{ margin-bottom: 0; }
/******************* Accordion Demo - 7 *****************/
#accordion7{
padding-right: 24px;
padding-left: 24px;
z-index: 1;
}
#accordion7 .panel{
border: none;
box-shadow: none;
}
#accordion7 .panel-heading{
padding: 0;
border-radius: 0;
border: none;
}
#accordion7 .panel-title{
padding: 0;
}
#accordion7 .panel-title a{
display: block;
font-size: 16px;
font-weight: 500;
background: #e16b47;
color: #f7c59f;
padding: 15px 25px;
position: relative;
margin-left: -24px;
transition: all 0.3s ease 0s;
}
#accordion7 .panel-title a.collapsed{
background: #f7c59f;
color: #e16b47;
margin-left: 0;
transition: all 0.3s ease 0s;
}
#accordion7 .panel-title a:before{
content: "";
border-left: 24px solid #e16b47;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
position: absolute;
top: 0;
right: -24px;
transition: all 0.3s ease 0s;
}
#accordion7 .panel-title a.collapsed:before{
border-left-color: #f7c59f;
}
#accordion7 .panel-title a:after{
content: "\f106";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 30%;
right: 15px;
font-size: 18px;
color: #f7c59f;
}
#accordion7 .panel-title a.collapsed:after{
content: "\f107";
color: #e16b47;
}
#accordion7 .panel-collapse{
position: relative;
}
#accordion7 .panel-collapse.in:before{
content: "";
border-right: 24px solid #f7c59f;
border-bottom: 18px solid transparent;
position: absolute;
top: 0;
left: -24px;
}
#accordion7 .panel-body{
font-size: 14px;
color: #333;
background: #e4e4e4;
border-top: none;
z-index: 1;
}
/******************* Accordion Demo - 8 *****************/
#accordion8 .panel{
border: none;
box-shadow: none;
border-radius: 0;
margin-bottom: 15px;
}
#accordion8 .panel-heading{
padding: 0;
border-radius: 0;
border: none;
}
#accordion8 .panel-title a{
display: block;
padding: 20px 30px 20px 50px;
background: #ffffff;
font-size: 16px;
font-weight: 500;
color: #20457c;
position: relative;
transition: all 0.5s ease 0s;
border: 1px solid #20457c;
border-radius: 5px;
}
#accordion8 .panel-title a.collapsed{
background: #fff;
color: #696969;
border: 1px solid #20457c;
border-radius: 5px;
}
#accordion8 .panel-title a:after,
#accordion8 .panel-title a.collapsed:after{
content: "\f106";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 5px;
font-size: 16px;
color: #fff;
text-align: center;
position: absolute;
top: 25%;
left: -13px;
background: #a91739;
}
#accordion8 .panel-title a.collapsed:after{
content: "\f107";
background: #e94c6f;
}
#accordion8 .panel-title a.collapsed:hover{
background: #f1f1f1;
color: #20457c;
}
#accordion8 .panel-body{
font-size: 14px;
color: #fff;
line-height: 25px;
background: #E94C6F;
padding: 15px 15px 15px 50px;
border: none;
transition: all 0.5s ease 0s;
}
/******************* Accordion Demo - 9 *****************/
#accordion9 .panel{
border-radius:0;
margin-bottom:15px;
}
#accordion9 .panel-heading{
padding:0;
}
#accordion9 .panel-title{
position: relative;
}
#accordion9 .panel-title:before{
content: "";
border-bottom: 25px solid rgba(0, 0, 0, 0);
border-left: 15px solid #ccc;
border-top: 23px solid rgba(0, 0, 0, 0);
width: 0;
height: 0;
position: absolute;
top: 0;
left: 34px;
}
#accordion9 .panel-title a{
color:#fff;
background:#e63c22;
display: block;
font-size: 16px;
line-height: 21px;
font-weight:500;
text-transform: uppercase;
padding: 13px 10px 13px 65px;
}
#accordion9 .panel-title a.collapsed{
color:#5b5656;
background:#fff;
}
#accordion9 .panel-title a:before,
#accordion9 .panel-title a.collapsed:before{
content: "\f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top:0;
left:0px;
padding:14px 10px;
color:#e63c22;
background:#ccc;
}
#accordion9 .panel-title a.collapsed:before{
content: "\f067";
}
#accordion9 .panel-body{
color: #828282;
font-size: 14px;
line-height: 26px;
}
/******************* Accordion Demo - 10 *****************/
a:hover,a:focus{
text-decoration: none;
outline: none;
}
#accordion10 .panel{
border: none;
border-radius: 0;
box-shadow: none;
margin: 0 30px 10px 30px;
overflow: hidden;
position: relative;
}
#accordion10 .panel-heading{
padding: 0;
border: none;
border-radius: 0;
position: relative;
}
#accordion10 .panel-title a{
display: block;
padding: 15px 20px;
margin: 0;
background: #fe7725;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
color: #fff;
border-radius: 0;
position: relative;
}
#accordion10 .panel-title a.collapsed{ background: #1c2336;
#accordion10 .panel-title a:before,
#accordion10 .panel-title a.collapsed:before{
content: "\f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 30px;
height: 30px;
line-height: 25px;
border-radius: 50%;
background: #fe7725;
font-size: 14px;
font-weight: normal;
color: #fff;
text-align: center;
border: 3px solid #fff;
position: absolute;
top: 10px;
right: 14px;
}
#accordion10 .panel-title a.collapsed:before{
content: "\f067";
background: #ababab;
border: 4px solid #626262;
}
#accordion10 .panel-title a:after,
#accordion10 .panel-title a.collapsed:after{
content: "";
width: 17px;
height: 7px;
background: #fff;
position: absolute;
top: 22px;
right: 0;
}
#accordion10 .panel-title a.collapsed:after{
width: 19px;
background: #ababab;
}
#accordion10 .panel-body{
border-left: 3px solid #fe7725;
border-top: none;
background: #fff;
font-size: 15px;
color: #1c2336;
line-height: 27px;
position: relative;
}
#accordion10 .panel-body:before{
content: "";
height: 3px;
width: 50%;
background: #fe7725;
position: absolute;
bottom: 0;
left: 0;
}
