развернуть / свернуть div (тумблер) при нажатии на заголовок

Question

развернуть / свернуть div (тумблер) при нажатии на заголовок

У меня есть следующий код JQuery для переключения просмотра дополнительной информации в DIV.

$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#"+bidValue+'_status')
expandArea.slideToggle(500);
});

Код работает, чтобы переключать представление отображения дополнительной информации при щелчке заголовка представления. Идентификаторы div для $ moreInfo создаются динамически.

$moreInfo = $bidValue.''."_status";

echo "<div class='expandCollapse' id='$bidValue'>Submission</div>";

echo "<div id='$moreInfo'>$displayComments</div>";

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

Я пробовал несколько вещей, но он закрывает или скрывает все div. Поиск в Интернете показывает только решение с использованием якорных тегов.

Какие-нибудь мысли…?

Благодарю.

1

jquery php slidetoggle

Решение

Другие решения

Предполагая, что заголовок и div содержимого — это братья и сестры, вы можете использовать:

$(.expandCollapse + div)
// All <div>s that are immediately after an .expandCollapse

$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#"+bidValue+'_status')
expandArea.slideToggle(500);
$('.expandCollapse + div').not(expandArea).hide();
});
$('[id$="_status"]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class='expandCollapse' id='bidValue1'>Submission1</div>
<div id='bidValue1_status'>displayComments</div>

<div class='expandCollapse' id='bidValue2'>Submission2</div>
<div id='bidValue2_status'>displayComments</div><div class='expandCollapse' id='bidValue3'>Submission3</div>
<div id='bidValue3_status'>displayComments</div>

0

Источник

Accepted Answer

Чтобы добиться этого, вы можете поместить общий класс на второй div элемент, позволяющий скрыть их все перед отображением следующего, например:

echo '<div id="$moreInfo" class="expand-area">$displayComments</div>';

$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#" + bidValue + '_status').slideToggle(500)
$('.expand-area').not(expandArea).hide();
});

Также обратите внимание, что вы можете сделать свой код гораздо более простым и универсальным, используя обход DOM для выбора элементов, вместо построения строк селектора на основе связанных id атрибуты, как это:

$(".expandCollapse").click(function () {
var expandArea = $(this).next('.expand-area').slideToggle(500);
$('.expand-area').not(expandArea).hide();
});

Код выше предполагает, что элементы являются братьями и сестрами, но вы можете легко изменить next() чтобы пройти однако требуется.

1