Bootstrap accordion With Material Design Plus & Minus

Bootstrap accordion

Material Design accordion with plus and minus glyphicon Bootstrap freebies snippet for web designer. Its Best fit in online FAQs website pages. The snippet is very clean and fast, easy to customize and use. This snippet is built with Bootstrap 3.x framework.

Website Credits

  • Roboto Font Family – Google font
  • Courgette Font Family – Google font
  • Bootstrap 3.3.7
  • Valid HTML5 & CSS3
  • Cross Browser Compatible (IE 9+, Chrome, FF, Safari, Opera)

Plus Minus with jquery

function toggleIcon(e) {
$(e.target)
.prev('.panel-heading')
.find(".short-full")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);

Material Design accordion CSS

.panel-group { -webkit-box-shadow: 0px 0px 20px 0px rgba(168, 182, 191, .6); -moz-box-shadow: 0px 0px 20px 0px rgba(168, 182, 191, .6); box-shadow: 0px 0px 20px 0px rgba(168, 182, 191, .6); }
.panel-group .panel+.panel { margin-top: 0px; }
.panel-group .panel { border-radius: 0px; }
.panel-title>a { display: block; }
.panel-title>a:hover, .panel-title>a:focus { text-decoration: none; color: #fd518b; }
.panel-default>.panel-heading { color: #263238; background-color: #fff; border-color: #ddd; }
.panel-default>.panel-heading+.panel-collapse>.panel-body { background-color: #3f51b5; color:#fff; }