Если я правильно понимаю, вы можете использовать для этой цели теги details и summary (оба новые в HTML5).
Широко поддерживается на обоихмобильные и настольные браузеры, кроме псевдобраузеров Internet Explorer , Edge и Edge Mobile .
Что ж, JavaScript придет на помощь, еслимы хотим убедиться, что наша функция переключения работает как на реальных, так и на псевдобраузерах.(Извините, jQuery, не в этот раз. Вы можете спасти мир в другой раз.)
Решение с JavaScript без jQuery
Примечания:
Использование элемента привязки (a) не очень хорошая идея, поскольку оно имеет другое семантическое и функциональное значение.Например, вы можете использовать элемент button, который лучше подходит как в семантическом, так и в функциональном смысле.Тем не менее, из-за того, что есть дополнительная работа для придания кнопке привлекательного вида, я просто заменил a на элемент div.Вы также можете использовать CSS-свойство cursor: pointer для этого div, чтобы добиться того же визуального эффекта, который имеет a.
Следует избегать неоднозначных именованных переменных.Для лучшей читаемости и упрощения обслуживания в будущем всегда присваивайте своим переменным осмысленное имя.
Я переименовал функцию toggleSwitch в toggleNext, поскольку она больше говорит о назначениикнопка.Кроме того, вы можете просто работать с Java Script Events , если вы хотите получить доступ к исходному элементу DOM через event.target
Функция toggleNext имеет дополнительную опциюпараметр называется display.Который по умолчанию block, и используется для установки видимого состояния отображения следующего родственного элемента.Это должно дать вам больше игровой комнаты, так как вы можете просто передать отображаемое значение для произвольного элемента родного брата, как toggleNext(event, 'grid')
В функции toggleNext(event, display) мы сначала получаем siblingElemиз нашего ссылочного элемента (event.target), а затем проверьте, имеет ли его свойство display значение 'none', если так, то нам нужно переключить состояние, просто назначив этому элементу новое отображаемое значение.
В исходном состоянии siblingElem.style.display имеет значение null, поэтому мы проверяем !siblingElem.style.display, это необходимо в первый раз.
- В JavaScript
!null и !undefined разрешены как truthy - Более подробная информация о правдивых и ложных
Радидля ясности, я удалил классы (s18 ro tx-1 b119 r100 t-21 p-2 br-5 mv-3) из элемента div, который вы указали в своем OP.
<div class="ro">
<div class="toggle-button" onclick="toggleNext(event)" title="A latest quote">
? Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT
</div>
<div>Display Some Content</div>
</div>
/* Display pointer on hover */
.toggle-button {
cursor: pointer;
}
/* Hide the next sibling element - does not matter what type it is */
.toggle-button + * {
display: none;
}
function toggleNext(event, display) {
var siblingElem = event.target.nextElementSibling;
if (!siblingElem) return;
display = display || 'block';
if (!siblingElem.style.display || siblingElem.style.display === 'none') {
siblingElem.style.display = display;
} else {
siblingElem.style.display = 'none';
}
}
Stackblitz: https://stackblitz.com/edit/emma-toggle-2-1?file=index.html
Теперь у вас есть еще больше игровой комнаты, вы можете логически привязать одну кнопку-переключатель к другой, например:
<div class="ro">
<div class="toggle-button" onclick="toggleNext(event)" title="A latest quote">
? Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT
</div>
<div>
Display Some Content
<div class="toggle-button" onclick="toggleNext(event)" title="A latest quote">
? Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT
</div>
<div>
Display Some Another Content
</div>
</div>
</div>
Stackblitz: https://stackblitz.com/edit/emma-toggle-2-2?file=index.html
Решение без JavaScript (<details>)
<details>
<summary>? Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT</summary>
Display
Some
Content
?
</details>
<br>
<details>
<summary>Another entry: Monday, 13 May 2019 ⏱ 19:07 EDT</summary>
<h1>Display some other content</h1>
</details>
Stackblitz: https://stackblitz.com/edit/emma-toggle-1-1?file=index.html
Кроме того, вы также можете вложить details в другой тег details:
<details>
<summary>? Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT</summary>
<details>
<summary>
Display Some Content
</summary>
<h1>Display some other content</h1>
</details>
</details>
Stackblitz: https://stackblitz.com/edit/emma-toggle-1-2?file=index.html
И, наконец, выПри желании можно скрыть показанную стрелку, которая отображается по умолчанию для тега <details>:
/* this is for Chrome */
details summary::-webkit-details-marker {
display:none;
}
/* this is for Firefox */
details summary {
list-style-type: none;
}