Accordion in jQuery -

hi working on accordion know if there cleaner way of toggling "plus" , "minus" signs. bellow code , link prototype.

jquery

$(".discount-wrapper h2").on("click", function() {     $(this).children('.plus-sign').toggle();     $(this).parent().children(".discount-content-wrapper").toggle('slow');     $(this).children('.minus-sign').toggle(); }); 

html

<div class="discount-wrapper">     <h2>accordion 3<i class="plus-sign">+</i><i class="minus-sign" style="display:none;">-</i></h2>     <div class="discount-content-wrapper">         <p>my content here</p>     </div> </div> <div class="discount-wrapper">     <h2>accordion 3<i class="plus-sign">+</i><i class="minus-sign" style="display:none;">-</i></h2>     <div class="discount-content-wrapper">         <p>my content here</p>     </div> </div> 

http://jsfiddle.net/

i 1 i-element element instead , toggle class. on default have i-element without class shows plus-sign. when click on h2 toggle class minus-sign (in case plus sign overwritten).

https://jsfiddle.net/2t3uyq4k/

$(".discount-wrapper h2").on("click", function() {     $(this).children('i').toggleclass('minus-sign');     $(this).parent().children(".discount-content-wrapper").toggle('slow'); }); 

changed html:

<div class="discount-wrapper">      <h2>accordion 3<i></i></h2>      <div class="discount-content-wrapper">          <p>my content here</p>     </div> </div> <div class="discount-wrapper">      <h2>accordion 3<i></i></h2>      <div class="discount-content-wrapper">          <p>my content here</p>     </div> </div> 

and css:

.discount-wrapper {     position:relative;     width:  100%;     background-color:#f3f3f3;     min-height:28px;     height: auto; }  .discount-wrapper i:after {     content: '+'; }  .discount-wrapper i.minus-sign:after {     content: '-'; }  .discount-content-wrapper {     display: none; }