кнопку Переключить, чтобы скрыть группу элементов по классам и отображения NextSibling в JavaScript или JQuery

Question

Пожалуйста, проверьте мой HTML код:

<button class="btn">Toggle</button> 
<p class="para">This is a text</p> 

<!-- when .btn[0] click then .para[0] will be display block but all other para[1],para[2],....,para[n] will be display none--> 


<button class="btn">Toggle</button> 
<p class="para">This is a text</p> 

<!--- .btn[1] only works for .para[1]--> 


<button class="btn">Toggle</button> 
<p class="para">This is a text</p> 

<!--- .btn[2] only works for .para[2]--> 

Когда .btn[0] получает щелкнул то .para[0] должен быть display:block, но все остальные para[1], para[2], ...., para[n] будет display:none.

Как достичь этого в JavaScript или JQuery (без добавления уникальных идентификаторов)?

Answer 1

Вы можете скрыть все .para по умолчанию с помощью CSS:

.para { 
    display: none 
} 

и используя ниже код, чтобы показать ожидаемый пункт, а также скрываться другие пункты

$('.btn').click(function() { 
    $('.para').hide(); 
    $(this).next().show(); 
}); 

Fiddle Demo

Answer 2

попробуйте это

$(document).ready(function(){ 
    $('.para').hide(); 
    $('.btn').click(function() { 
     $('.para').hide(); 
     $(this).next().show(); 
    }); 
}); 

См FIDDLE