javascript - Click event toggling all classes rather than correct block -

i have collapsed/collapsible blocks whereby first block open , second/third closed. work way want in terms of opening , closing, can't head around how alter function plus , minus icons change correct block. @ moment change @ same time no matter block open or close.

how can alter function toggled block updates correct icon?

function togglediv(divid) { $("#"+divid).toggle(); $('.product-toggle span.icon').toggleclass('icon-plus icon-minus') } 

html

<p><a href="javascript:togglediv('features');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">features</span></a></p> <div id="features">     features  </div>  <p><a href="javascript:togglediv('specifications');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">specifications</span></a></p> <div id="specifications">     spec  </div>  <p><a href="javascript:togglediv('faq');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">faq</span></a></p> <div id="faq">     faq  </div> 

let me start off saying no... no!

add target in markup data attribute:

<div class="product-toggle" data-target="features">   <p>     <span class="icon icon-plus" aria-hidden="true"></span>     <span class="toggle-title">features</span>   </p> </div> <div id="features">     features  </div> 

attach listener product-toggle class so:

$(document).on('click', '.product-toggle', function() {   var target = this.dataset.target;   $('#'+target).toggle();   $(this).find('span.icon').toggleclass('icon-plus icon-minus'); }); 

jsfiddle