LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Lorem ipsum
Lorem ipsum 2
Lorem ipsum 3
CSS
/*General style */

#accordion {padding: 30px 150px;}
.panel-title a {font-size: 14px;text-transform: uppercase;font-weight: 600;padding-right:20px}
.panel-default>.panel-heading {text-align: left;}
.panel-heading {padding: 15px 15px;}


/* Code for animation -- to change direction of chevron just change -40px to 40px and vice versa */
.glyphicon-chevron-down-custom span, .glyphicon-chevron-up-custom span {width: 10px; height: 5px; background-color: rgb(99, 99, 99); display: inline-block; transition: all .1s linear;}
.glyphicon-chevron-down-custom .sp-1, .glyphicon-chevron-up-custom .sp-2 {transform: skewY(-40deg);}
.glyphicon-chevron-up-custom .sp-1, .glyphicon-chevron-down-custom .sp-2 {transform: skewY(40deg);}
.glyphicon {top: -2px;}

JS
//Toggle chevrons

function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down-custom glyphicon-chevron-up-custom');
        }
        $('#accordion').on('hidden.bs.collapse', toggleChevron);
        $('#accordion').on('shown.bs.collapse', toggleChevron);

Description

While worked over last project, searched a clean and pure solution for animated chevron in bootstrap's accordion. Decided to make my own and result was quite good - very little code but very flexible with smooth animation through css' transitions. Feel free to use in any situations!
Term
Tue, 11/28/2017 - 13:42

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv