Material Design Collapse With Plus & Minus Sign in Bootstrap

Material Design collapse accordion with plus and minus glyphicon Bootstrap freebies snippet for web designer. Best fit in online FAQs website page. The snippet is very clean and fast, easy to customize and use. This snippet is built with latest Bootstrap 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 collapse 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; }


Theme author

author Mirchu

Theme attributes

Category: Snippets
Browsers: Chrome, Firefox, Safari, Opera, IE11, IE10, IE9, Android Browser, Microsoft Edge
Tags: bootstrap freebies, collapse, accordion, material design, jquery, download, snippets
Release Date: 13 Nov, 2016

Location

P: +(92) 332-5903076
info@mirchu.net

Social Circle

Other Sites