Как сделать несколько divs slidetoggle с меняющейся стрелкой

Question

Я очень новичок в javascript и jQuery и теперь полностью застрял, несмотря на различные варианты. Я пытаюсь создать раздел expand/collapse с несколькими div. Я хотел бы, чтобы каждый div открывался и закрывался отдельно, со стрелкой сбоку, направленной вверх или вниз, в зависимости от того, расширяется или сжимается содержимое.

Из кода, который я написал ниже, только первый div работает правильно. Единственное, что случается Когда вы нажимаете на два других div, это то, что стрелка в первом div изменяется.

Любая помощь будет принята с благодарностью.

Ниже приводится CSS:

#header_background { 
background-image: url(header-background.png); 
width:748px; 
height:43px; 
margin-left: -17px;} 

#expand_arrow { 
display: inline-block; 
width: 17px; 
height: 18px; 
float:left; 
margin-left:20px; 
padding-left:0px; 
padding-top:11px; 
background-repeat:no-repeat; } 

.sub_header { 
color:#204187; 
font-weight:bold; 
font-size:16px; 
vertical-align:middle; 
padding-left:4px; 
padding-top:12px; 
float:left; 
text-decoration:none; 
} 

Вот попытка яваскрипт и JQuery:

function chngimg() { 
    var img = document.getElementById('expand_arrow').src; 
    if (img.indexOf('expand-arrow.png')!=-1) { 
     document.getElementById('expand_arrow').src = 'images/collapse-arrow.png'; 
    } 
    else { 
     document.getElementById('expand_arrow').src = 'images/expand-arrow.png'; 
    } 
} 


$(document).ready(function(){ 
    $("#header_background").click(function(){ 
    $("#section").slideToggle("slow"); 
    }); 
}); 

А вот HTML-

<div id="header_background" > 
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()"> 
<div class="sub_header" onclick="chngimg()">header 1</div> 
</div> 
<div id="section" style="display:none"> 
text 1 
</div> 

<div id="header_background" > 
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()"> 
<div class="sub_header" onclick="chngimg()">header 2</div> 
</div> 
<div id="section" style="display:none"> 
text 2 
</div> 

<div id="header_background" > 
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()"> 
<div class="sub_header" onclick="chngimg()">header 3</div> 
</div> 
<div id="section" style="display:none"> 
text 3 
</div> 

Answer 1

Это работает только для первого набора элементов, потому что вы используете идентификаторы и идентификаторы должны быть уникальными в пределах документа (страница). Вы можете перейти на использование классов и выполнить простой прогон DOM, чтобы получить соответствующий раздел на основе щелчка заголовка. Что-то вроде этого:

$(document).ready(function() { 
 
\t $('.header_background').click(function(e) { 
 
\t \t $(this).next('.section').slideToggle('slow'); 
 
\t \t var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image 
 
\t \t if (img.src.indexOf('expand-arrow.png') != -1) { 
 
\t \t \t img.src = 'images/collapse-arrow.png'; 
 
\t \t } 
 
\t \t else { 
 
\t \t img.src = 'images/expand-arrow.png'; 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header_background" > 
 
    <img class="expand_arrow" alt="" src="images/collapse-arrow.png"> 
 
    <div class="sub_header">header 1</div> 
 
</div> 
 
<div class="section" style="display:none"> 
 
    text 1 
 
</div> 
 

 
<div class="header_background" > 
 
    <img class="expand_arrow" alt="" src="images/collapse-arrow.png"> 
 
    <div class="sub_header">header 2</div> 
 
</div> 
 
<div class="section" style="display:none"> 
 
    text 2 
 
</div> 
 

 
<div class="header_background" > 
 
    <img class="expand_arrow" alt="" src="images/collapse-arrow.png"> 
 
    <div class="sub_header">header 3</div> 
 
</div> 
 
<div class="section" style="display:none"> 
 
    text 3 
 
</div>

Answer 2

Посмотрите на ваш следующий раздел заголовка кликнули вот так. И изменить свой идентификатор для класса, потому что ID должен быть уникальным

$(".header_background").click(function(){ 
    $(this).nextAll(".section:first").slideToggle("slow"); 
});