Переключение независимых divs не работает

Question

У меня есть фрагмент jQuery, который кажется мне таким, каким он должен работать, но это не так. Это позволяет только первому div переключиться. Если я удалю первый набор div, второй начнет работать, поэтому я знаю, что это не опечатка или что-то еще.

JsFiddle здесь http://jsfiddle.net/kits87/69qnosyb/1/

HTML

<div> 
     <div id="ByteHeaderContainer"> 
      <div class="ByteHeadTitle"><p>Header</p></div> 
     </div> 

     <div id="Byte">Copy</div> 
</div>  

    <br><br><br> 

<div> 
     <div id="ByteHeaderContainer"> 
      <div class="ByteHeadTitle"><p>Header</p></div> 
     </div> 

     <div id="Byte">Copy</div> 
</div> 

Jquery

$('.ByteHeadTitle').hide(); 

$('#ByteHeaderContainer').click(function() {   
    $(this).next('#Byte').fadeToggle('fast'); 
    $(this).children('.ByteHeadTitle').fadeToggle('fast'); 
}); 

Что мне не хватает?

Answer 1

изменение

<div id="ByteHeaderContainer">

к

<div class="ByteHeaderContainer">

и

$('#ByteHeaderContainer').click(function() {

к

$('.ByteHeaderContainer').click(function() {

Помните Id должен быть уникальным в DOM, поэтому вы только заставить его работать с первым элементом.

Answer 2

Работа скрипка: http://jsfiddle.net/66p2dj1q/

#ByteHeaderContainer Изменения к .ByteHeaderContainer в вашем HTML (изменение класса), CSS и JQuery.

Answer 3

id каждого элемента должен быть уникальным.

Вы можете использовать классы, но вместо этого, работу вокруг вашей ситуации было бы заменить ваш код следующим образом:

$('[id="ByteHeaderContainer"]').click(function() { 
    $(this).next('#Byte').fadeToggle('fast'); 
    $(this).children('.ByteHeadTitle').fadeToggle('fast'); 
}); 

Here is the updated JSFiddle

Answer 4

идентификаторы должны быть уникальными. Попробуйте изменить #ByteHeaderContainer на .byteHeaderContainer в HTML и JS, и он будет работать.