Bootstrap 3 accordion - expand collapse icons beside panel title -
i want simple bootstrap 3 accordion:
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseone"> collapsible group item #1 </a> </h4> </div> <div id="collapseone" class="panel-collapse collapse"> <div class="panel-body"> anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt laborum eiusmod. brunch 3 wolf moon </div> </div> </div> </div>
to have plus icon when in closed , minus icon when in hover , active. css:
.panel-title { background: url('plus.png') no-repeat 100% 50% ; padding-right:20px;} .panel-title a:hover{ background: url('minus.png') no-repeat 100% 50% ; } .panel-title a:active { background: url('minus.png') no-repeat 100% 50% ; }
so far working except active state. can me make work? thank you
if recall correctly, :active
state occurs while link clicked. :active
has nothing state of collapse.
to work, change css this:
.panel-title { background: url('plus.png') no-repeat 100% 50% ; padding-right:20px;} .panel-title a:hover{ background: url('minus.png') no-repeat 100% 50% ; } .panel-title a.active { background: url('minus.png') no-repeat 100% 50% ; }
note instead of using :active
pseudo, going use class called .active
.
now, toggle class on , off via javascript. there couple of ways this, straight forward attach listener existing a
tag, so:
$('[data-toggle]').on('click', function() { $(this).toggleclass('active'); });
so in summary, change :active
.active
in css, , add 3 lines of javascript.
see http://www.bootply.com/130209 working example.
Comments
Post a Comment