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

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -