Как задать toggle элементу при клике?

Question

[corona-net]

Доброго дня.
Есть 2 элемента, по клику на них открывается невидимая область. Вопрос: как прописать, что по клику на каждый элемент, открывалась только его область, а не двух сразу. Пока неизвестно сколько будет элементов и задавать каждому в отдельности id и прописывать клик-кажется глупо.

<div class="container-example">
    <div class="box1">
        <div class="string1">1секция</div>
        <div class="string2"></div>
    </div>
    <div class="box12">
        <div class="string1">2секция</div>
        <div class="string2"></div>
    </div>
</div>

.container-example {
    width: 300px;
    height: 300px;
    border: 5px solid green;
    margin-bottom: 500px;
}
.string1 {
    cursor: pointer;
}
.string2 {
    width: 100%;
    height: 100px;
    background-color: aquamarine;
    display: none;
}

$( document ).ready(function() {
        $(".string1").click(function () {
            $(".string2").toggle();
        });
    });

Вот пример: u0763918test1.isp.regruhosting.ru зелёный квадрат сверху, 2 строки= 1секция, 2 секция.

Answer 1

[v3shin]

Можно, например, задать боксам класс box и модифицировать скрипт:

$(".string1").click(function () {
    $(this).closest(".box").find(".string2").toggle();
});

Answer 2

[Антон Литвиненко]

Или например так

$(".string1").click(function () {
    $(this).next(".string2").toggle();
});

Общая идея в том, чтобы использовать this, тоесть тот таргет, на котором произошло событие, в дальше через обертки или потомков найти нужный элемент. В jquery очень много таких штук типа parent, parents, next, closest, find

Answer 3

[agutin]

Добрый день.

Зависит от задачи, на сколько нужно универсально.

Можно так

$(document).ready(function() {
  $(`.string1`).on('click', function(){
    $(this).next('.string2').toggle();
  });
});

Либо если в контейнере будет только боксы, то так

$(document).ready(function() {
  $('.container-example').children().on('click', function(){
    $(this).find('.string2').toggle();
  });
});