Accordion

<!
doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Accordion - srtdash</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png"
href="assets/images/icon/favicon.ico">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/themify-icons.css">
<link rel="stylesheet" href="assets/css/metisMenu.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">

<link rel="stylesheet"
href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css"
media="all" />

<link rel="stylesheet" href="assets/css/typography.css">
<link rel="stylesheet" href="assets/css/default-css.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/responsive.css">

<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>


<div id="preloader">
<div class="loader"></div>
</div>


<div class="page-container">

<div class="sidebar-menu">
<div class="sidebar-header">
<div class="logo">
<a href="index.html"><img src="assets/images/icon/logo.png"
alt="logo"></a>
</div>
</div>
<div class="main-menu">
<div class="menu-inner">
<nav>
<ul class="metismenu" id="menu">
<li>
<a href="javascript:void(0)" aria-
expanded="true"><i class="ti-dashboard"></i><span>dashboard</span></a>
<ul class="collapse">
<li><a href="index.html">ICO dashboard</a></li>
<li><a href="index2.html">Ecommerce
dashboard</a></li>
<li><a href="index3.html">SEO
dashboard</a></li>
</ul>
</li>
<li>
expanded="true"><i class="ti-layout-sidebar-left"></i><span>Sidebar
Types
</span></a>
<li><a href="index.html">Left Sidebar</a></li>
<li><a href="index3-
horizontalmenu.html">Horizontal Sidebar</a></li>
</ul>
</li>
<li>
expanded="true"><i class="ti-pie-chart"></i><span>Charts</span></a>
<li><a href="barchart.html">bar chart</a></li>
<li><a href="linechart.html">line
Chart</a></li>
<li><a href="piechart.html">pie chart</a></li>
</ul>
</li>
<li class="active">
expanded="true"><i class="ti-palette"></i><span>UI Features</span></a>
<li class="active"><a
href="accordion.html">Accordion</a></li>
<li><a href="alert.html">Alert</a></li>
<li><a href="badge.html">Badge</a></li>
<li><a href="button.html">Button</a></li>
<li><a href="button-group.html">Button
Group</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="list-group.html">List
Group</a></li>
<li><a href="media-object.html">Media
Object</a></li>
<li><a href="modal.html">Modal</a></li>
<li><a
href="pagination.html">Pagination</a></li>
<li><a href="popovers.html">Popover</a></li>
<li><a
href="progressbar.html">Progressbar</a></li>
<li><a href="tab.html">Tab</a></li>
<li><a
href="typography.html">Typography</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="grid.html">grid system</a></li>
</ul>
</li>
<li>
expanded="true"><i class="ti-slice"></i><span>icons</span></a>
<li><a href="fontawesome.html">fontawesome
icons</a></li>
<li><a href="themify.html">themify
icons</a></li>
</ul>
</li>
<li>
expanded="true"><i class="fa fa-table"></i>
<span>Tables</span></a>
<li><a href="table-basic.html">basic
table</a></li>
<li><a href="table-layout.html">table
layout</a></li>
<li><a href="datatable.html">datatable</a></li>
</ul>
</li>
<li><a href="maps.html"><i class="ti-map-alt"></i>
<span>maps</span></a></li>
<li><a href="invoice.html"><i class="ti-receipt"></i>
<span>Invoice Summary</span></a></li>
<li>
expanded="true"><i class="ti-layers-alt"></i> <span>Pages</span></a>
<li><a href="login.html">Login</a></li>
<li><a href="login2.html">Login 2</a></li>
<li><a href="login3.html">Login 3</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="register2.html">Register
2</a></li>
3</a></li>
4</a></li>
<li><a href="screenlock.html">Lock
Screen</a></li>
<li><a href="screenlock2.html">Lock Screen
2</a></li>
<li><a href="reset-pass.html">reset
password</a></li>
<li><a href="pricing.html">Pricing</a></li>
</ul>
</li>
<li>
expanded="true"><i class="fa fa-exclamation-triangle"></i>
<span>Error</span></a>
<li><a href="404.html">Error 404</a></li>
</ul>
</li>
<li>
expanded="true"><i class="fa fa-align-left"></i> <span>Multi
level menu</span></a>
<li><a href="#">Item level (1)</a></li>
<li><a href="#" aria-expanded="true">Item level
(1)</a>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>


<div class="main-content">

<div class="header-area">
<div class="row align-items-center">

<div class="col-md-6 col-sm-8 clearfix">
<div class="nav-btn pull-left">
<span></span>
<span></span>
<span></span>
</div>
<div class="search-box pull-left">
<form action="#">
<input type="text" name="search"
placeholder="Search..." required>
<i class="ti-search"></i>
</form>
</div>
</div>

<div class="col-md-6 col-sm-4 clearfix">
<ul class="notification-area pull-right">
<li id="full-view"><i class="ti-fullscreen"></i></li>
<li id="full-view-exit"><i
class="ti-zoom-out"></i></li>
<li class="dropdown">
<i class="ti-bell dropdown-toggle" data-
toggle="dropdown">
<span>2</span>
</i>
<div class="dropdown-menu bell-notify-box notify-
box">
<span class="notify-title">You have 3 new
notifications <a href="#">view all</a></span>
<div class="nofity-list">
<a href="#" class="notify-item">
<div class="notify-thumb"><i class="ti-
key btn-danger"></i></div>
<div class="notify-text">
<p>You have Changed Your
Password</p>
<span>Just Now</span>
</div>
</a>
comments-smiley btn-info"></i></div>
<p>New Commetns On Post</p>
<span>30 Seconds ago</span>
</div>
</a>
key btn-primary"></i></div>
<p>Some special like you</p>
</div>
</a>
comments-smiley btn-info"></i></div>
<p>New Commetns On Post</p>
<span>30 Seconds ago</span>
</div>
</a>
key btn-primary"></i></div>
<p>Some special like you</p>
</div>
</a>
Password</p>
</div>
</a>
Password</p>
</div>
</a>
</div>
</div>
</li>
<li class="dropdown">
<i class="fa fa-envelope-o dropdown-toggle" data-
toggle="dropdown"><span>3</span></i>
<div class="dropdown-menu notify-box nt-enveloper-
box">
<span class="notify-title">You have 3 new
notifications <a href="#">view all</a></span>
<div class="nofity-list">
<div class="notify-thumb">
<img
src="assets/images/author/author-img1.jpg" alt="image">
</div>
<p>Aglae Mayer</p>
<span class="msg">Hey I am waiting
for you...</span>
<span>3:15 PM</span>
</div>
</a>
<img
</div>
<p>Aglae Mayer</p>
<span class="msg">When you can
connect with me...</span>
</div>
</a>
<img
</div>
<p>Aglae Mayer</p>
<span class="msg">I missed you so
much...</span>
</div>
</a>
<img
</div>
<p>Aglae Mayer</p>
<span class="msg">Your product is
completely Ready...</span>
</div>
</a>
<img
</div>
<p>Aglae Mayer</p>
for you...</span>
</div>
</a>
<img
</div>
<p>Aglae Mayer</p>
for you...</span>
</div>
</a>
<img
</div>
<p>Aglae Mayer</p>
for you...</span>
</div>
</a>
</div>
</div>
</li>
<li class="settings-btn">
<i class="ti-settings"></i>
</li>
</ul>
</div>
</div>
</div>


<div class="page-title-area">
<div class="row align-items-center">
<div class="col-sm-6">
<div class="breadcrumbs-area clearfix">
<h4 class="page-title pull-left">Dashboard</h4>
<ul class="breadcrumbs pull-left">
<li><a href="index.html">Home</a></li>
<li><span>Accordion</span></li>
</ul>
</div>
</div>
<div class="col-sm-6 clearfix">
<div class="user-profile pull-right">
<img class="avatar user-thumb"
src="assets/images/author/avatar.png" alt="avatar">
<h4 class="user-name dropdown-toggle" data-
toggle="dropdown">Kumkum Rai <i class="fa fa-angle-down"></i></h4>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Message</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</div>
</div>
</div>
</div>

<div class="main-content-inner">

<div class="row">

<div class="col-lg-6 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Accordion 1</h4>
<div id="accordion1" class="according">
<div class="card">
<div class="card-header">
<a class="card-link" data-
toggle="collapse" href="#accordion11">Collapsible Group
Item #1</a>
</div>
<div id="accordion11" class="collapse show"
data-parent="#accordion1">
Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Nemo eaque porro alias assumenda accusamus incidunt
odio molestiae maxime quo atque in et quaerat, vel unde aliquam aperiam quidem
consectetur omnis dicta officiis? Dolorum, error dolorem!
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-link" data-
toggle="collapse" href="#accordion12">Collapsible
Group Item #2</a>
</div>
<div id="accordion12" class="collapse"
</div>
</div>
</div>
<div class="card">
Group Item #3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="card">
<div id="accordion2" class="according accordion-
s2">
<div class="card">
Item #1</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #2</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div id="accordion3" class="according accordion-
s3">
<div class="card">
Item #1</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #2</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div id="accordion4" class="according accordion-s3
gradiant-bg">
<div class="card">
Item #1</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #2</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div id="accordion5" class="according accordion-s2
gradiant-bg">
<div class="card">
Item #1</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #2</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div id="accordion6" class="according gradiant-bg">
<div class="card">
Item #1</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #2</a>
</div>
</div>
</div>
</div>
<div class="card">
Group Item #3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>


<footer>
<div class="footer-area">
<p>© Copyright 2018. All right reserved. Template by <a
href="https://colorlib.com/wp/">Colorlib</a>.</p>
</div>
</footer>

</div>


<div class="offset-area">
<div class="offset-close"><i class="ti-close"></i></div>
<ul class="nav offset-menu-tab">
<li><a class="active" data-toggle="tab"
href="#activity">Activity</a></li>
<li><a data-toggle="tab" href="#settings">Settings</a></li>
</ul>
<div class="offset-content tab-content">
<div id="activity" class="tab-pane fade in show active">
<div class="recent-activity">
<div class="timeline-task">
<div class="icon bg1">
<i class="fa fa-envelope"></i>
</div>
<div class="tm-title">
<h4>Rashed sent you an email</h4>
<span class="time"><i class="ti-time"></i>09:35</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Esse distinctio itaque at.
</p>
</div>
<i class="fa fa-check"></i>
</div>
<h4>Added</h4>
<span class="time"><i class="ti-time"></i>7 Minutes
Ago</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur.
</p>
</div>
<i class="fa fa-exclamation-triangle"></i>
</div>
<h4>You missed you Password!</h4>
<span class="time"><i class="ti-time"></i>09:20
Am</span>
</div>
</div>
<i class="fa fa-bomb"></i>
</div>
<h4>Member waiting for you Attention</h4>
</div>
</p>
</div>
<i class="ti-signal"></i>
</div>
<h4>You Added Kaji Patha few minutes ago</h4>
<span class="time"><i class="ti-time"></i>01 minutes
ago</span>
</div>
</p>
</div>
<i class="fa fa-envelope"></i>
</div>
<h4>Ratul Hamba sent you an email</h4>
</div>
<p>Hello sir , where are you, i am egerly waiting for you.
</p>
</div>
</div>
</div>
</p>
</div>
</div>
</div>
</div>
<i class="fa fa-bomb"></i>
</div>
</div>
</p>
</div>
<i class="ti-signal"></i>
</div>
</div>
</p>
</div>
</div>
</div>
<div id="settings" class="tab-pane fade">
<div class="offset-settings">
<h4>General Settings</h4>
<div class="settings-list">
<div class="s-settings">
<div class="s-sw-title">
<h5>Notifications</h5>
<div class="s-swtich">
<input type="checkbox" id="switch1" />
<label for="switch1">Toggle</label>
</div>
</div>
<p>Keep it 'On' When you want to get all the
notification.</p>
</div>
<h5>Show recent activity</h5>
</div>
</div>
<p>The for attribute is necessary to bind our custom
checkbox with the input.</p>
</div>
<h5>Show your emails</h5>
</div>
</div>
<p>Show email so that easily find you.</p>
</div>
<h5>Show Task statistics</h5>
</div>
</div>
<p>The for attribute is necessary to bind our custom
checkbox with the input.</p>
</div>
<h5>Notifications</h5>
</div>
</div>
<p>Use checkboxes when looking for yes or no
answers.</p>
</div>
</div>
</div>
</div>
</div>
</div>


<script src="assets/js/vendor/jquery-2.2.4.min.js"></script>

<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/metisMenu.min.js"></script>
<script src="assets/js/jquery.slimscroll.min.js"></script>
<script src="assets/js/jquery.slicknav.min.js"></script>

<script src="assets/js/plugins.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>

Accordion

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Accordion

Uploaded by

Copyright:

Available Formats

<!

You might also like