Нажмите, чтобы показать и удалить класс

Question

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

У меня есть изображение .toggle-plus, которое при нажатии должно показывать содержимое внутри .hide, а также изменять класс изображения на .toggle-minus.

Мой макет как так

<div class="widget-header"> 
<h3 class="title">Header 1</h3> 
    <span class="toggle-plus"></span> 
</div> 

<address class="vcard hide"> 
    <!--Content Here--> 
</address> 



<div class="widget-header"> 
<h3 class="title">Header 2</h3> 
    <span class="toggle-plus"></span> 
</div> 

<div class="share-items hide"> 
    <!--content here --> 
</div> 


<div class="widget-header"> 
<h3 class="title">Header 3</h3> 
    <span class="toggle-plus"></span> 
</div> 
<ul class="opening-hours hide"> 
<!--content here --> 
</ul> 

CSS

.hide { 
display:none 
} 

.toggle-plus { 
    background-image:url('/assets/toggle-open.png'); 
width:38px; 
height:38px; 
position: absolute; 
    right: 10px; 
    top: 12px; 
    cursor: pointer; 
} 

.toggle-minus { 
background-image:url('/assets/toggle-close.png'); 
width:38px; 
height:38px; 
position: absolute; 
    right: 10px; 
    top: 12px; 
    cursor: pointer; 
    } 

Может кто-нибудь помочь мне в этом и объяснить процесс, чувствую, как им обучения Jquery снова

Благодаря

Answer 1

Нечто похожее:

$('.widget-header').on('click', '.toggle-plus, .toggle-minus' function(e){ 
    // you can toggle class names here 
    $(this).parents('.widget-header:eq(0)').next('.hide').slideToggle(); 
}); 

Было бы намного проще, если вы можете объединить HTML, так что есть больше структурных отношения между скрытым DIVs и заголовками и т.д.