jQuery: show onclick работает только для первой кнопки

Question

Я хочу иметь больше кнопок, что покажет контент onclick. Когда кто-то нажимает любую кнопку, может появиться все содержимое (toShow). В настоящее время он работает, но только на первой кнопке. Поэтому, когда кто-то нажимает первую кнопку, появляется все содержимое, но мне нужно, чтобы все содержимое отображалось, когда кто-то нажал на любую кнопку на странице. Может быть, мне нужен цикл? Спасибо за помощь.

$(document).ready(function(){ 
    $("toShow").hide(); 
    $("#show").click(function(){ 
     $("toShow").show(); 
     $("buttonShow").hide(); 
    }); 
}); 

<h1>First element</h1> 
<buttonShow> 
<button id="show">show</button> 
</buttonShow> 

<toShow> 
content 
</toShow> 

<h2>Second element</h2> 
<buttonShow> 
<button id="show">show</button> 
</buttonShow> 

<toShow> 
content 
</toShow> 

Answer 1

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

<button class="show">show</button> 
<button class="show">show</button> 
<button class="show">show</button> 

---

$('.show').click(function(){ 
    $('toShow').show(); 
    $('buttonShow').hide(); 
}); 

JSFiddle Example