jquery - Toggle BootStrap drop down Icons -

so little new bootstrap v3.3.4 , terrible @ javascript/jquery.

i trying toggle between plus , minus sign when clicking drop down menu in bootstrap's nav bar (in mobile view, inside mobile dropdown). have drop down menus in navigation , want plus sign right of each one, once click plus sign disappears , want minus sign show, simple enough? don't want use accordion either. have looked around quite bit , have seen few examples, none quite same situation, feel should super simple , built bootstrap not seeing it.

here nav bar part, took out other parts not affect drop down.

html:

<!--nav bar--> <nav class="navbar navbar-default hidden-md hidden-lg hidden-md hidden-lg" role="navigation">     <div class="navbar-header">         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">             <span class="sr-only">toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>         </button>     </div>     <div class="collapse navbar-collapse" id="navbar-collapse-1">         <ul class="nav navbar-nav">             <li class="dropdown hamburgerlistline">                 <i class="glyphicon glyphicon-plus pull-right"></i>                 <a href="#" data-toggle="dropdown" class="dropdown-toggle">glass containers</a>                 <ul class="dropdown-menu">                     <li class="dropdownlist"><a href="#">glass bottles</a></li>                     <li class="dropdownlist"><a href="#">glass jars</a></li>                     <li class="dropdownlist"><a href="#">glass jugs</a></li>                     <li class="dropdownlist"><a href="#">glass vials</a></li>                 </ul>             </li>             <li class="dropdown hamburgerlistline">                 <span class="glyphicon glyphicon-plus pull-right "></span>                 <a href="#" data-toggle="dropdown" class="dropdown-toggle">plastic containers</a>                 <ul class="dropdown-menu">                     <li class="dropdownlist"><a href="#">plastic bottles</a></li>                     <li class="dropdownlist"><a href="#">plastic jars</a></li>                     <li class="dropdownlist"><a href="#">plastic jugs</a></li>                     <li class="dropdownlist"><a href="#">plastic vials</a></li>                     <li class="dropdownlist"><a href="#">plastic tubes</a></li>                 </ul>             </li>             <li class="hamburgerlist hamburgerlistflat"><a href="#">sign in</a></li>             <li class="hamburgerlist hamburgerlistflat"><a href="#">my account</a></li>         </ul>     </div> </nav><!--nav bar--> 

jquery:

$('.collapse')         .on('shown.bs.collapse', function () {             $(this).parent().find(".glyphicon-plus")                     .removeclass("glyphicon-plus")                     .addclass("glyphicon-minus");         })         .on('hidden.bs.collapse', function () {             $(this).parent().find(".glyphicon-minus")                     .removeclass("glyphicon-minus")                     .addclass("glyphicon-plus");         }); 

i prefer not use jquery if possible, hoping built bootstrap. problem jquery activates when click initial drop down, want activate when click drop down within drop down.

is possible without jquery/javascript , no accordion in bootstrap v3.3.4?

fiddle: https://jsfiddle.net/4zs9r0vz/