Plus-minus symbol of toggle for jquery accordion

Question

I want to add plus-minus symbol to my query accordion while toggling. The symbol should be plus when collapsed and minus when expanded. I tried searching on various posts,but I am not able to find it. I have no idea of jquery at all. Any help will be appreciated. You can find the working code on this link:

http://www.bootply.com/X3tSn83qU1

Answer 1

You can add a icon and toggle the class to change the image

 $(document).ready(function() { $(".accordion li:has(ul) > div").prepend('<i class="glyphicon glyphicon-minus" />') $(".accordion > li > div").click(function(e) { if ($(e.target).is('input')) { //if clicked on input element don't do anything return } $('.active').not(this).removeClass('active').next().slideUp(300); $(this).toggleClass('active'); var $next = $(this).next().slideToggle(300); var $ico = $(this).find('i.glyphicon').toggleClass('glyphicon-plus glyphicon-minus') if (false == $(this).next().is(':visible')) { $('.accordion > ul').not($next).slideUp(300); $('.accordion i.glyphicon').not($ico).addClass('glyphicon-plus').removeClass('glyphicon-plus'); } }); $('li :checkbox').on('click', function() { var $chk = $(this), $li = $chk.closest('li'), $ul, $parent; if ($li.has('ul')) { $li.find(':checkbox').not(this).prop('checked', this.checked); } do { $ul = $li.parent(); $parent = $ul.siblings(':checkbox'); if ($chk.is(':checked')) { $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) } else { $parent.prop('checked', false) } $chk = $parent; $li = $chk.closest('li'); } while ($ul.is(':not(.someclass)')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> <ul class="accordion"> <li class="js_slider"> <div> <input type="checkbox"><a href="#">North America</a> </div> <ul class="accordion"> <li class="js_slider"> <div> <input type="checkbox"><a href="#">Canada</a> </div> </li> <li class="js_slider"> <div> <input type="checkbox"><a href="#">United States of America</a> </div> <ul class="accordion"> <li> <div> <input type="checkbox"><a href="#">Alabama</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Alaska</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Florida</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Georgia</a> </div> </li> </ul> </li> <li> <div> <input type="checkbox"><a href="#">Texas</a> </div> <ul class="accordion"> <li> <div> <input type="checkbox"><a href="#">Austin</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Dallas</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Irving</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Houston</a> </div> </li> </ul> </li> </ul> </li> <li> <div> <input type="checkbox"><a href="#">Latin America</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Europe,Middle <br> East and Africa</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Asia Pacific</a> </div> </li> </ul> <br> <br> <br> <ul class="accordion"> <li> <div> <input type="checkbox"><a href="#">North America</a> </div> <ul class="accordion"> <li> <div> <input type="checkbox"><a href="#">United States of America</a> </div> <ul class="accordion"> <li> <div> <input type="checkbox"><a href="#">Manager 1</a> </div> <ul class="accordion"> <li> <div> <input type="checkbox"><a href="#">Alabama</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Alaska</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Florida</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Georgia</a> </div> </li> <li> <div> <input type="checkbox"><a href="#">Illinois</a> </div> </li> </ul> </li> <li> <div> <input type="checkbox">Manager 2</div> </li> <li> <div> <input type="checkbox">Manager 3</div> </li> </ul> </li> </ul> </li> </ul>