Динамическое обновление значков с помощью jQuery

Question

Я кодирую простой аккордеон, используя HTML5 и jQuery, чтобы анимировать состояния открытия и закрытия.

Я хочу визуально показывать пользователям, когда разделы аккордеона открываются или закрываются с использованием шрифтов, удивительных значков. На данный момент мне удалось добиться этого, используя следующий код ниже:

$(this).find('i').toggleClass('fa fa-plus-circle fa fa-minus-circle') 

Единственная проблема, что у меня возникают проблемы, выяснить, как сбросить каждый значок секции со значком плюс, если не в открытом состоянии. Например, если я нажму пункт 1, значок теперь изменится с плюс на минус, отлично! Но эта проблема заключается в том, что если я нажму на пункт 2 или 3, значок не вернется к плюсу.

Как я показано на скриншоте выше, это то, что я пытаюсь добиться. Я использовал пункты 1 и 3 в качестве примеров, но он должен работать одинаково для всех элементов.

Я предоставил JSFiddle with my syntax, а вот код:

$(document).ready(function() { 
 
    'use strict'; 
 
    $('.accordian h3').click(function() { 
 
     //toggle plus and minus icons 
 
     $(this).find('i').toggleClass('fa fa-plus-circle fa fa-minus-circle'); 
 
     //slide up all the list items 
 
     $('.accordian ul ul').slideUp(); 
 
     //slide down the list itmes below the h3 clicked - only if it's closed 
 
     if (!$(this).next().is(':visible')) { 
 
      $(this).next().slideDown(); 
 
     } 
 
    }); 
 
});

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); 
 
html, body { 
 
    background-color: #ccc 
 
} 
 
.accordian { 
 
\t margin: 0 auto; 
 
\t color: #000; 
 
} 
 
.accordian h3 { 
 
\t padding: 15px; 
 
    line-height: 1px; 
 
\t cursor: pointer; 
 
    border: 1px solid #000; 
 
\t -webkit-border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    border-radius: 6px; 
 
} 
 
/*iconfont styles*/ 
 
.accordian h3 i { 
 
    font-size: 18px; 
 
\t margin-right: 10px; 
 
} 
 
.accordian li { 
 
\t list-style-type: none; 
 
} 
 
/*Lets hide the non active li's by default*/ 
 
.accordian ul ul { 
 
\t display: none; 
 
} 
 
.accordian li.active ul { 
 
\t display: block; 
 
}

<div class="accordian"> 
 
    <ul> 
 
     <li> 
 
      <h3><i class="fa fa-plus-circle"></i>Item 1</h3> 
 
      <ul> 
 
       <li> 
 
        Item 1 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <h3><i class="fa fa-plus-circle"></i>Item 2</h3> 
 
      <ul> 
 
       <li> 
 
        Item 2 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <h3><i class="fa fa-plus-circle"></i>Item 3</h3> 
 
      <ul> 
 
       <li> 
 
        Item 3 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

Answer 1

$(document).ready(function() { 
    'use strict'; 
    $('.accordian h3').click(function() { 
     //toggle plus and minus icons 
     $('.accordian h3 i').addClass('fa-plus-circle').removeClass('fa-minus-circle'); 
     $(this).find('i').toggleClass('fa fa-plus-circle fa fa-minus-circle'); 
     //slide up all the list items 
     $('.accordian ul ul').slideUp(); 
     //slide down the list itmes below the h3 clicked - only if it's closed 
     if (!$(this).next().is(':visible')) { 
      $(this).next().slideDown(); 
     }else{ 
      $('.accordian h3 i').addClass('fa-plus-circle').removeClass('fa-minus-circle'); 
     } 
    }); 
}); 

JSFIDDLE