"Collepse in Material Design With Bootstrap"
Bootstrap 3.3.0 Snippet by sawan1108

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Bootstrap Template</title>
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/MDB/live/Half%20Carousel/css/mdb.css" rel="stylesheet">
<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
</head>
<body>
<!-- Page content -->
<div class="container page-content">
<!-- Content Row -->
<div class="row">
<div class="col-md-12" id="main">
<h3>Doesn't it look better ?</h3>
<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 class="waves-effect" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why is it better
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/***********
Accordion css
***************/
#accordion .panel-heading {
padding: 0;
}
#accordion .panel-title > a {
display: block;
padding: 0.4em 0.6em;
outline: none;
font-weight: bold;
text-decoration: none;
}
#accordion .panel-title > a.collapsed {
background: #c5cae9;
color:#000;
}
#accordion .panel-title > a {
background: #ff4444;
color:#fff;
}
#accordion .panel-title > a.accordion-toggle::before,
#accordion a[data-toggle="collapse"]::before {
content: "\e113";
float: left;
font-family: 'Glyphicons Halflings';
margin-right: 1em;
}
#accordion .panel-title > a.accordion-toggle.collapsed::before,
#accordion a.collapsed[data-toggle="collapse"]::before {
content: "\e114";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO React
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: