Toggle jquery не работает правильно

Question

Я использую функцию, такую ​​как я хочу показать только одну вкладку, например, если я нажму других, скроется, и я также хочу переключить открытую вкладку.

.show() JQuery просто появляется на первой первой вкладке, а не на других.

JQuery:

$('#toClick').click(function() { 
    $('#toShow').hide(); 
    $(this).parent('#hideShow').find('#toShow').toggle(); 
}); 

HTML:

<span id="hideShow"> 
    <span id="toClick">tab 1</span> 
    <span id="toShow">Tab 1 content</span> 
</span> 


<span id="hideShow"> 
    <span id="toClick">tab 2</span> 
    <span id="toShow">Tab 2 content</span> 
</span> 


<span id="hideShow"> 
    <span id="toClick">tab 3</span> 
    <span id="toShow">Tab 3 content</span> 
</span> 

Answer 1

id должен быть уникальным в том же документе изменить дублирующие те, от общего class, проверьте пример ниже:

<span class="hideShow"> 
    <span class="toClick">tab 1</span> 
    <span class="toShow">Tab 1 content</span> 
</span> 

<span class="hideShow"> 
    <span class="toClick">tab 2</span> 
    <span class="toShow">Tab 2 content</span> 
</span> 

<span class="hideShow"> 
    <span class="toClick">tab 3</span> 
    <span class="toShow">Tab 3 content</span> 
</span> 

Затем используйте селектор класса .:

$('.toClick').click(function() { 
    $('.toShow').hide(); 
    $(this).parent('.hideShow').find('.toShow').show(); 
}); 

Надеется, что это помогает.

---