Можно ли скрыть блок по условию в JavaScript
Есть 3 блока. Блок warning1 иногда скрывается сос страницы. Возможно ли используя JavaScript скрыть блок warning3 если не отображается warning1?
<div class="warning1" title = "Леопард">
<p>Beware of the leopard</p>
</div>
<div class="warning2">
<p>Beware of the leopard</p>
</div>
<div class="warning3">
<p>Beware of the leopards</p>
</div>Ответы (1 шт):
Автор решения: eccs0103
→ Ссылка
С помощью JS
const divWarning1 = document.querySelector(`div.warning1`);
const divWarning3 = document.querySelector(`div.warning3`);
const inputToggle = document.querySelector(`input#toggle`);
inputToggle.addEventListener(`change`, (event) => {
divWarning1.hidden = !divWarning1.hidden;
divWarning3.hidden = divWarning1.hidden; // warning3 скрывается если скрыта warning1
});<input id="toggle" type="checkbox">
<label for="toggle">Click it</label>
<div class="warning1" title="Леопард">
<p>Beware of the leopard</p>
</div>
<div class="warning2">
<p>Beware of the leopard</p>
</div>
<div class="warning3">
<p>Beware of the leopards</p>
</div>Ещё с помошью JS
const divWarning1 = document.querySelector(`div.warning1`);
const divWarning3 = document.querySelector(`div.warning3`);
const inputToggle = document.querySelector(`input#toggle`);
inputToggle.addEventListener(`change`, (event) => {
divWarning1.hidden = !divWarning1.hidden;
});
new MutationObserver(() => {
divWarning3.hidden = divWarning1.hidden;
}).observe(divWarning1, { attributes: true, attributeFilter: [`hidden`] });<input id="toggle" type="checkbox">
<label for="toggle">Click it</label>
<div class="warning1" title="Леопард">
<p>Beware of the leopard</p>
</div>
<div class="warning2">
<p>Beware of the leopard</p>
</div>
<div class="warning3">
<p>Beware of the leopards</p>
</div>Даже без JS
Часть с JS нужно только для демонстрации
const divWarning1 = document.querySelector(`div.warning1`);
const inputToggle = document.querySelector(`input#toggle`);
inputToggle.addEventListener(`change`, (event) => {
divWarning1.hidden = !divWarning1.hidden;
});div.warning1[hidden]~div.warning3 {
display: none;
}<input id="toggle" type="checkbox">
<label for="toggle">Click it</label>
<div class="warning1" title="Леопард">
<p>Beware of the leopard</p>
</div>
<div class="warning2">
<p>Beware of the leopard</p>
</div>
<div class="warning3">
<p>Beware of the leopards</p>
</div>