Может ли это быть преобразовано для работы с несколькими (более 20) экземплярами?

Question

Я использую этот код для часто задаваемых вопросов. Вы нажимаете на изображение, и оно открывает окно, нажатие на изображение также закрывает окно. IMG переключается на каждый клик. До сих пор я не смог преобразовать это для работы с более чем 1 разделом. Я ничего не знаю о jquery или javascript, но понимаю некоторые концепции программирования. Я пытался в течение 4 часов без удачи. Мне нужна твоя помощь!

$(document).ready(function() {
$('#expandcontract').toggle(
function(){ // you can add as much here as you'd like
$('#box').show('slow');
$('#imgArrows').attr("src","images/up.png");
}, function() { // same here
$('#box').hide('slow');
$('#imgArrows').attr("src","images/down.png");
});
});

Answer 1

После изменения всех идентификаторов на классы вы, вероятно, захотите что-то вроде этого:

$(document).ready(function() {
    $('.expandcontract').toggle(
        function() {
            $('.box',this).show('slow');
            $('.imgArrows',this).attr("src","images/up.png");
        }, function() {
            $('.box',this).hide('slow');
            $('.imgArrows',this).attr("src","images/down.png");
        }
    );
});

Предполагая , что ваш HTML похож на:

<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>
<div class="expandcontract">
    <div class="box" />
    <div class="imgArrows" />
</div>

Answer 2

ID должны предоставляться только одному элементу. Вы захотите назначить класс элементов, затем получить все элементы с соответствующим классом и добавить к ним обработчик переключения.