Может ли openbox (1 кнопка) действовать на 2 элемента верстки?

28 февраля 2022, 02:10

Допустим у меня есть кнопка, по нажатию на которую появляется блок, при повторном нажатии он исчезает. Но мне хотелось бы, чтобы появляющийся блок замещал другой, т.е. скрывал его (display: none). Как прописать такое в js?

function openbox(id = "bgdesc") { 
    display1 = document.getElementById(id = "bgdesc").style.display; 
    display2 = document.getElementById(id = "article-cont").style.display; 
 
    if (display1 == 'none' || display2 == 'grid') { 
        document.getElementById(id = "bgdesc").style.display = 'grid'; 
    } 
    if (display1 == 'grid' || display2 == 'none') { 
        document.getElementById(id = "article-cont").style.display = 'none'; 
    } else { 
        document.getElementById(id = "article-cont").style.display = 'grid'; 
        document.getElementById(id = "bgdesc").style.display = 'none'; 
    } 
}

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
    <meta charset="utf-8"> 
    <title>Пример</title> 
</head> 
 
<body> 
    <header> 
         <a href="#" class="article-plus" onclick="openbox('bgdesc') ; return false">Кнопка</a> 
    </header> 
    <article> 
       <div class="bgdesc" id="bgdesc" style="display: none; background-color: aqua"> 
        <ul> 
            <li>Не растрескивается, не деформируется под воздействием окружающей среды, влаги, солей, щелочей, кислот;</li> 
            <li>Не подвержена гниению, не поддается поражениям грибков и насекомых;</li> 
            <li>Обладает высокой механической прочностью, выдерживает установку тяжелых предметов;</li> 
            <li>Достаточно проста в монтаже: доски можно пилить, строгать, закручивать в них саморезы;</li> 
            <li>Обладает устойчивым внешним видом: не меняет форму, цвет, эксплуатационные характеристики;</li> 
            <li>Полностью экологична: не выделяет никаких вредных соединений, не имеет неприятного запаха;</li> 
            <li>Дарит комфорт и безопасность в эксплуатации (препятствует скольжению, не дает заноз, не царапает);</li> 
            <li>Пожаробезопасна: не поддерживает горение;</li> 
        </ul> 
    
    </div> 
       <article-cont id="article-cont"> 
        <p style="background-color: red">CopyPaste Li Europan Lingues [Plain Text] If you’d rather use a copy of li Europan lingues that doesn’t include HTML markup such as for use in a Word document, WYSIWYG editor, or WordPress’s visual editor, you can use this version. Li Europan lingues Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p> 
        </article-cont> 
    </article> 
    <script type="text/javascript" src="js.js"> 
</script> 
 
</body> 
 
</html>

Answer 1

const block1 = document.querySelector('#block1'); 
const block2 = document.querySelector('#block2'); 
 
const button = document.querySelector('button'); 
 
button.addEventListener('click', onClickHandler); 
 
function onClickHandler() { 
  block1.classList.toggle('hidden'); 
  block2.classList.toggle('hidden'); 
}

div { 
  width: 100px; 
  height: 100px; 
  border: 1px solid black; 
} 
 
button { 
  display: block; 
} 
 
.hidden { 
  display: none; 
}

<div id="block1">block 1</div> 
<div class="hidden" id="block2">block 2</div> 
 
<button>press</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

версия opengl в sdl2

Вот так работает и отображает всё на экране

182

c++

при компиляции freetype для android, не найден ft2build.h

Хочу скомпилировать игру для android на sdl2Скачал с github freetype для android

c++

Существует ли способ удалить из multiset в c++ только один элемент с данным значение а не все?

Функция erase(x) удаляет из multiset все элементы со значением x, есть ли способ или похожая структура данных, чтобы этого избежать и удалять только...

c++

Перегрузка операторов << и >> для базового класса и класса наследника

Base - наследник Derived()Если у обоих этих классов есть функция print(), и мы заходим ее вызвать от *b, то вызовется функция определенная для Base, хотя...

156