Accordions
Click to preview the Accordions demo. View demo
Accordion Style 01
Code:
html
<div class="panel-group dg-accordion01" id="dg-acc01">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc01" data-toggle="collapse" href="#dg-01-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-01-1">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc01" data-toggle="collapse" href="#dg-01-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-01-2">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc01" data-toggle="collapse" href="#dg-01-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-01-3">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc01" data-toggle="collapse" href="#dg-01-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-01-4">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo...</p>
</div>
</div>
</div>
</div>Accordion Style 02
Code:
html
<div class="panel-group dg-accordion02" id="dg-acc02">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc02" data-toggle="collapse" href="#dg-02-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-02-1">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc02" data-toggle="collapse" href="#dg-02-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-02-2">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc02" data-toggle="collapse" href="#dg-02-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-02-3">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc02" data-toggle="collapse" href="#dg-02-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-02-4">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
</div>Accordion Style 03
Code:
html
<div class="panel-group dg-accordion03" id="dg-acc03">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc03" data-toggle="collapse" href="#dg-03-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-03-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc03" data-toggle="collapse" href="#dg-03-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-03-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc03" data-toggle="collapse" href="#dg-03-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-03-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc03" data-toggle="collapse" href="#dg-03-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-03-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 04
Code:
html
<div class="panel-group dg-accordion04" id="dg-acc04">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc04" data-toggle="collapse" href="#dg-04-1"><span class="arrow"></span><strong>Our Solution</strong></a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-04-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc04" data-toggle="collapse" href="#dg-04-2"><span class="arrow"></span><strong>Our Values</strong></a></h4>
</div>
<div class="panel-collapse collapse" id="dg-04-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc04" data-toggle="collapse" href="#dg-04-3"><span class="arrow"></span><strong>Our Technology</strong></a></h4>
</div>
<div class="panel-collapse collapse" id="dg-04-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc04" data-toggle="collapse" href="#dg-04-4"><span class="arrow"></span><strong>Our Missions</strong></a></h4>
</div>
<div class="panel-collapse collapse" id="dg-04-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 05
Code:
html
<div class="panel-group dg-accordion05" id="dg-acc05">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc05" data-toggle="collapse" href="#dg-05-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-05-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc05" data-toggle="collapse" href="#dg-05-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-05-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc05" data-toggle="collapse" href="#dg-05-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-05-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc05" data-toggle="collapse" href="#dg-05-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-05-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 06
Code:
html
<div class="panel-group dg-accordion06" id="dg-acc06">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc06" data-toggle="collapse" href="#dg-06-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-06-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc06" data-toggle="collapse" href="#dg-06-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-06-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc06" data-toggle="collapse" href="#dg-06-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-06-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc06" data-toggle="collapse" href="#dg-06-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-06-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 07
Code:
html
<div class="panel-group dg-accordion07" id="dg-acc07">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc07" data-toggle="collapse" href="#dg-07-1"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-07-1">
<div class="panel-body">
<div class="right"><img alt="" src="/Portals/13/Features-Images/accordio-img01.jpg" /></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc07" data-toggle="collapse" href="#dg-07-2"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-07-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc07" data-toggle="collapse" href="#dg-07-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-07-3">
<div class="panel-body">
<div class="right"><img alt="" src="/Portals/13/Features-Images/accordio-img01.jpg" /></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 08
Code:
html
<div class="panel-group dg-accordion08" id="dg-acc08">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc08" data-toggle="collapse" href="#dg-08-1"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-08-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc08" data-toggle="collapse" href="#dg-08-2"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-08-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc08" data-toggle="collapse" href="#dg-08-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-08-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc08" data-toggle="collapse" href="#dg-08-4"><span class="arrow"></span>Create DNN Website</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-08-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 09
Code:
html
<div class="panel-group dg-accordion09" id="dg-acc09">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc09" data-toggle="collapse" href="#dg-09-1"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-09-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc09" data-toggle="collapse" href="#dg-09-2"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-09-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc09" data-toggle="collapse" href="#dg-09-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-09-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc09" data-toggle="collapse" href="#dg-09-4"><span class="arrow"></span>Create DNN Website</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-09-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 10
Code:
html
<div class="panel-group dg-accordion10" id="dg-acc10">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc10" data-toggle="collapse" href="#dg-10-1"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-10-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc10" data-toggle="collapse" href="#dg-10-2"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-10-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc10" data-toggle="collapse" href="#dg-10-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-10-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc10" data-toggle="collapse" href="#dg-10-4"><span class="arrow"></span>Create DNN Website</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-10-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 11
Code:
html
<div class="panel-group dg-accordion11" id="dg-acc11">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc11" data-toggle="collapse" href="#dg-11-1"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-11-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc11" data-toggle="collapse" href="#dg-11-2"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-11-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc11" data-toggle="collapse" href="#dg-11-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-11-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 12
Code:
html
<div class="panel-group dg-accordion12" id="dg-acc12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc12" data-toggle="collapse" href="#dg-12-1"><span class="fa fa-bell-o"></span><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-12-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc12" data-toggle="collapse" href="#dg-12-2"><span class="fa fa-cloud-download"></span><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-12-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc12" data-toggle="collapse" href="#dg-12-3"><span class="fa fa-cloud-upload"></span><span class="arrow"></span>Create DNN Website</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-12-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 13
Code:
html
<div class="panel-group dg-accordion13" id="dg-acc13">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc13" data-toggle="collapse" href="#dg-13-1"><span class="fa fa-heart-o"></span><span class="arrow"></span><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-13-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex, fermentum vel libero egetnta interdum semper libero. Curabitur egestas, arcu id tempor convallisceras dignissim, diam vitae endta ornare molestie. Ut cursus massa at urnaaculis estie. Donec eu libero sit amet quam. Curabitur adent egestas, arcu id tempor convallis.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc13" data-toggle="collapse" href="#dg-13-2"><span class="fa fa-star-o"></span><span class="arrow"></span><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-13-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex, fermentum vel libero egetnta interdum semper libero. Curabitur egestas, arcu id tempor convallisceras dignissim, diam vitae endta ornare molestie. Ut cursus massa at urnaaculis estie. Donec eu libero sit amet quam. Curabitur adent egestas, arcu id tempor convallis.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc13" data-toggle="collapse" href="#dg-13-3"><span class="fa fa-pencil"></span><span class="arrow"></span><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-13-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex, fermentum vel libero egetnta interdum semper libero. Curabitur egestas, arcu id tempor convallisceras dignissim, diam vitae endta ornare molestie. Ut cursus massa at urnaaculis estie. Donec eu libero sit amet quam. Curabitur adent egestas, arcu id tempor convallis.</p>
</div>
</div>
</div>
</div>Accordion Style 14
Code:
html
<div class="panel-group dg-accordion14" id="dg-acc14">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc14" data-toggle="collapse" href="#dg-14-1"><span class="number">01</span><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-14-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc14" data-toggle="collapse" href="#dg-14-2"><span class="number">02</span><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-14-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc14" data-toggle="collapse" href="#dg-14-3"><span class="number">03</span><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-14-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 15
Code:
html
<div class="panel-group dg-accordion15" id="dg-acc15">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc15" data-toggle="collapse" href="#dg-15-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-15-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc15" data-toggle="collapse" href="#dg-15-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-15-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc15" data-toggle="collapse" href="#dg-15-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-15-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc15" data-toggle="collapse" href="#dg-15-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-15-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 16
Code:
html
<div class="panel-group dg-accordion16" id="dg-acc16">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc16" data-toggle="collapse" href="#dg-16-1"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-16-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc16" data-toggle="collapse" href="#dg-16-2"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-16-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc16" data-toggle="collapse" href="#dg-16-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-16-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc16" data-toggle="collapse" href="#dg-16-4"><span class="arrow"></span>Create DNN Website</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-16-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc16" data-toggle="collapse" href="#dg-16-5"><span class="arrow"></span>Responsive Web</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-16-5">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 17
Code:
html
<div class="panel-group dg-accordion17" id="dg-acc17">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc17" data-toggle="collapse" href="#dg-17-1"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-17-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc17" data-toggle="collapse" href="#dg-17-2"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-17-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc17" data-toggle="collapse" href="#dg-17-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-17-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc17" data-toggle="collapse" href="#dg-17-4"><span class="arrow"></span>Create DNN Website</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-17-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 18
Code:
html
<div class="panel-group dg-accordion18" id="dg-acc18">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc18" data-toggle="collapse" href="#dg-18-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-18-1">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc18" data-toggle="collapse" href="#dg-18-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-18-2">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc18" data-toggle="collapse" href="#dg-18-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-18-3">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc18" data-toggle="collapse" href="#dg-18-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-18-4">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex...</p>
</div>
</div>
</div>
</div>Accordion Style 19
Code:
html
<div class="panel-group dg-accordion19" id="dg-acc19">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc19" data-toggle="collapse" href="#dg-19-1"><span class="arrow"></span>Our Solution</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-19-1">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa molli...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc19" data-toggle="collapse" href="#dg-19-2"><span class="arrow"></span>Our Values</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-19-2">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa molli...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc19" data-toggle="collapse" href="#dg-19-3"><span class="arrow"></span>Our Technology</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-19-3">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa molli...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc19" data-toggle="collapse" href="#dg-19-4"><span class="arrow"></span>Our Missions</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-19-4">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa molli...</p>
</div>
</div>
</div>
</div>Accordion Style 20
Code:
html
<div class="panel-group dg-accordion20" id="dg-acc20">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc20" data-toggle="collapse" href="#dg-20-1"><span class="arrow"></span>Module Development</a></h4>
</div>
<div class="panel-collapse collapse in" id="dg-20-1">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc20" data-toggle="collapse" href="#dg-20-2"><span class="arrow"></span>DNN Design&Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-20-2">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc20" data-toggle="collapse" href="#dg-20-3"><span class="arrow"></span>Unlimited-color Skin</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-20-3">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc20" data-toggle="collapse" href="#dg-20-4"><span class="arrow"></span>Create DNN Website</a></h4>
</div>
<div class="panel-collapse collapse" id="dg-20-4">
<div class="panel-body">
<p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond mentum leo massa ...</p>
</div>
</div>
</div>
</div>