Slidetoggle и изменить цвет фона div на div нажмите?

Question

Итак, допустим, у меня есть несколько div на странице с идентификатором «Toggle». и в каждом div есть еще два divs.

1. «Заголовок» Это всегда видно.
2. «Комментарий» Это включает/выключает, когда заголовок загорается (по умолчанию выключено).

Как бы это сделать с помощью jquery? Я получил его работу, но только с одним на странице.

<script> 
    $(function() { 
     $('#toggle').on('click', function() { 
      $(this).find('#comment').slideToggle(100); 
     }); 
    }); 
</script> 

(возможно, это другой вопрос, но я хотел бы также, как «заголовок» фон DIV, чтобы быть изменен на синий при щелчке (и комментарий опускается вниз) и вернуться, когда «заголовок» нажат снова, раздвигая комментарии вверх)

Answer 1

Как я уже сказал в своем комментарии выше, таргетинг jQuery не будет работать (или, по крайней мере, не будет вести себя так, как ожидалось), если использовать ID более одного раза. В этом случае используйте классы для стилей и таргетинга или используйте уникальные идентификаторы для каждого модуля «toggle».

Хорошо, вот ваши Codepen example :)

Основные компоненты [расширен стиль доступен в Codepen эскизе]

HTML

<div class='toggle'> 
    <h3 class='headline'>My headline</h3> 
    <div class='comments'> 
    <ul> 
     <li>Comment 1</li> 
     <li>Comment 2</li> 
     <li>Comment 3</li> 
    </ul> 
    </div> 
</div> 

CSS

.comments { 
    display: none; 
} 

.comments.open { 
    display: block; 
} 

JQuery

$('.headline').on('click', function(){ 
    $(this).toggleClass('active'); 
    $(this).next('.comments').toggleClass('open'); 
}); 

Alternate JQuery slideToggle

$(this).next('.comments').slideToggle(); // instead of toggling a class 

Надежда, что помогает!

UPDATE:

Pure JQuery цвет фона тумблер

var active = false; 

$('.header').on('click', function(){ 
    if(active == false) { 
    $(this).css('background-color', 'blue'); 
    active = true; 
    } else { 
    $(this).css('background-color', 'white'); 
    active = false; 
    } 
}); 

Answer 2

Он работает только с одним, потому что вы вставили идентификатор = «переключаемые» вместо этого использовать класс так, он будет работать на все и в случае разворачивания попробуйте это http://jsfiddle.net/MohammadHamza/F64n9/'>Fiddle.