如何隐藏一个 div 并显示包含在同一个 div 中的另一个 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>

Answer 1

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 = "↓"; sections[i].classList.remove("is-expandad"); } else { console.log(demoBox2[i]); demoBox1[i].style.display = "none"; demoBox2[i].style.display = "block"; button.innerHTML = "×"; 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>