Блог

У меня есть этот HTML:

 <div>
    <button type="button" id="a"></button>
</div>
<div>
    <button type="button" id="b"></button>
</div>
<div>
    <button type="button" id="c"></button>
</div>

<div class="hidden" id="a1">
    <p>text1</p>
</div>
<div class="hidden" id="b1">
    <p>text2</p>
</div>
<div class="hidden" id="c1">
    <p>text3</p>
</div>

<div class="hidden" id ="content">
    <p>text4</p>
</div>
 

и CSS:

 .hidden {
display: none}

.shows {
display:  block}
 

Я хочу, чтобы при нажатии «a» отображались «a1» и «содержимое», b отображал «b1» и «содержимое»…

 const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")

const a1 = document.getElementById("a1")
const b1 = document.getElementById("b1")
const c1 = document.getElementById("c1")

const content = document.getElementById("content")

a.addEventListener('click', function (event) {
if (content.className === "hidden") {
    content.className  = " shows";
}
if (a1.className === "hidden") {
    a1.className  = " shows";
    } else {
    a1.className = "hidden";
}

b.addEventListener('click', function (event) {
if (content.className === "hidden") {
    content.className  = " shows";
}
if (b1.className === "hidden") {
    b1.className  = " shows";
    } else {
    b1.className = "hidden";
}

c.addEventListener('click', function (event) {
if (content.className === "hidden") {
    content.className  = " shows";
}
if (c1.className === "hidden") {
    c1.className  = " shows";
    } else {
    c1.className = "hidden";
}
 

но я хочу, чтобы, когда я нажимаю одну кнопку, и все кнопки скрыты, «содержимое» тоже скрыто, я знаю способ сделать это, добавив этот код каждого «щелчка»

 if (a1.className === "hidden" amp;amp; b1.className === "hidden" amp;amp; c1.className === "hidden") {
        content.classList.remove("shows");
    }
 

Гайка, мне нужен другой способ сделать это, потому что я должен добавлять кнопку каждые x дней… может быть добавление массива со всеми кнопками

    const d1 = [a1, b1, c1]
 

и добавляйте for в каждый «клик», но я не знаю, как это сделать.

Ваш вопрос не совсем ясен. Вы имеете в виду что-то вроде этого?

 [...document.querySelectorAll("button")].forEach(function(button) {
  button.addEventListener("click", function(evt) {
    var element = document.getElementById(event.target.id   "1")
    if (element.style.display == "block") {
      element.style.display = "none";
    } else {
      element.style.display = "block";
      document.getElementById("content").style.display = "block";
    }
    if (document.getElementById("a1").style.display == "none" amp;amp; document.getElementById("b1").style.display == "none" amp;amp; document.getElementById("c1").style.display == "none") {
      document.getElementById("content").style.display = "none"
    }
  })
}) 

 <div>
  <button type="button" id="a">a</button>
</div>
<div>
  <button type="button" id="b">b</button>
</div>
<div>
  <button type="button" id="c">c</button>
</div>

<div id="a1" style="display:none;">
  <p>text1</p>
</div>
<div id="b1" style="display:none;">
  <p>text2</p>
</div>
<div id="c1" style="display:none;">
  <p>text3</p>
</div>
<div id="content" style="display:none;">
  <p>text4</p>
</div>