How to hide a div and display another div that is contained within the same div?

Question

In the code below I would like to hide .demo-box and display .demo-box2 when the .section that contains them is on full display. I tried adding style.display = block on .demo-box2 and style.display = none on .demo-box but it is not working. I'm not sure if there is a working solution on CSS that I can try to resolve this problem.

var Boxlayout = (function() {
  var wrapper = document.body,
    sections = Array.from(document.querySelectorAll(".section")),
    closeButtons = Array.from(document.querySelectorAll(".close-section")),
    demoBox1 = Array.from(document.querySelectorAll(".demo-box")),
    demoBox2 = Array.from(document.querySelectorAll(".demo-box2")),
    expandedClass = "is-expanded",
    hasExpandedClass = "has-expanded-item";

  return {
    init: init
  };

  function init() {
    _initEvents();
  }

  function _initEvents() {
    sections.forEach(function(element) {
      element.onclick = function() {
        _openSection(this);
      };
    });
    closeButtons.forEach(function(element) {
      element.onclick = function(element) {
        element.stopPropagation();
        _closeSection(this.parentElement);
      };
    });
  }

  function _openSection(element) {
    if (!element.classList.contains(expandedClass)) {
      element.classList.add(expandedClass);
      wrapper.classList.add(hasExpandedClass);
      demoBox1.style.display = "none";
      demoBox2.style.display = "block";
    }
  }

  function _closeSection(element) {
    if (element.classList.contains(expandedClass)) {
      element.classList.remove(expandedClass);
      wrapper.classList.remove(hasExpandedClass);
      demoBox1.style.display = "block";
      demoBox2.style.display = "none";
    }
  }
})();

Boxlayout.init();

<main class="main">
  <section class="section" id="home">
    <div class="close-section">&times;</div>
    <div class="demo-box">Section 1</div>
    <div class="demo-box2">home</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="demo-box">Section 2</div>
    <div class="demo-box2">about</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="demo-box">Section 3</div>
    <div class="demo-box2">portfolio</div>
  </section>
  <section class="section" id="contact">
    <div class="bg"></div>
    <div class="close-section">&times;</div>
    <div class="demo-box">Section 4</div>
    <div class="demo-box2">contact</div>
  </section>
</main>

You're trying to set style on a collection of elements. You can't do that. — isherwood, Jul 06 '21 at 20:19
Does this answer your question? https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — isherwood, Jul 06 '21 at 21:04
I read through the link, but in the code snippet, it is able to styles a collections of elements. I just am not able to hide .demo-box when the .section that contains it is expanded to fullscreen size. — Manel Ariapala, Jul 06 '21 at 22:54

score 1 · Answer 1 · answered Jul 06 '21 at 20:10

I didn't quite understood your question. But in the below snippet you could check and run how to expand and close a section "show a div and hide another".

var wrapper = document.body,
  sections = Array.from(document.querySelectorAll(".section")),
  closeButtons = Array.from(document.querySelectorAll(".open-close-section")),
  demoBox1 = Array.from(document.querySelectorAll(".demo-box")),
  demoBox2 = Array.from(document.querySelectorAll(".demo-box2")),
  expandedClass = "is-expanded",
  hasExpandedClass = "has-expanded-item";


closeButtons.forEach((button, i, arr) => {
//button is the element, i is the index, arr is closeButtons array
  button.addEventListener("click", function() {
    console.log(button.parentElement.classList.contains("is-expandad"));
    if (button.parentElement.classList.contains("is-expandad")) {
      demoBox1[i].style.display = "block";
      demoBox2[i].style.display = "none";
      button.innerHTML = "&darr;";
      sections[i].classList.remove("is-expandad");
    } else {
      console.log(demoBox2[i]);
      demoBox1[i].style.display = "none";
      demoBox2[i].style.display = "block";
      button.innerHTML = "&times;";
      sections[i].classList.add("is-expandad");
    }
  });
});

.demo-box2 {
  display: none;
}

<main class="main">
  <section class="section" id="home">
    <div class="open-close-section">&darr;</div>
    <div class="demo-box">Section 1</div>
    <div class="demo-box2">home</div>
  </section>
  <section class="section">
    <div class="open-close-section">&darr;</div>
    <div class="demo-box">Section 2</div>
    <div class="demo-box2">about</div>
  </section>
  <section class="section">
    <div class="open-close-section">&darr;</div>
    <div class="demo-box">Section 3</div>
    <div class="demo-box2">portfolio</div>
  </section>
  <section class="section" id="contact">
    <div class="bg"></div>
    <div class="open-close-section">&darr;</div>
    <div class="demo-box">Section 4</div>
    <div class="demo-box2">contact</div>
  </section>
</main>

Actually what I would like it to do is when I click on each section, only .demo-box2 will be display on fullscreen. Currently it displays .demo-box both before and after I click on the section. — Manel Ariapala, Jul 06 '21 at 23:02
I think i quite understand you now. Lets simplify it, when the page load you want demo-box to be shown - which is the title of the section - when the user clicks it everything gets hide and only the pressed section demo-box2 will be displayed. For example like a navigation bar — GNour, Jul 07 '21 at 11:52

How to hide a div and display another div that is contained within the same div?

1 Answers1