Remove From My Forums

javascript having display another div from one div

Question

User-418973555 posted

try to modify some code got it from github to allow display one div from another by hiding one div and display another (eg. trying to display content in full page after transition, and hiding title in the expanded portion page)

the code basically having 4 portions , once click it will expand to full screen,

javascript
----------

var Boxlayout = function() {

  var wrapper = document.body,
      sections = Array.from(document.querySelectorAll('.section')),
      closeButtons = Array.from(document.querySelectorAll('.close-section')),
      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);
      wrapper.body.document.getElementById("iddemobox1").style.display = 'none';
      wrapper.body.document.getElementById("idcontentbox1").style.display = 'block';
    }
  }

  function _closeSection(element) {
    if ( element.classList.contains(expandedClass) ) {
      element.classList.remove(expandedClass);
      wrapper.classList.remove(hasExpandedClass);
    }
  }

}();

Boxlayout.init();

css 
---

.section {
  ;
  z-index: 0;
  width: 50%;
  height: 50%;
  overflow: hidden;
  -webkit-transform: scale(1);
          transform: scale(1);
  will-change: transform;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.section:first-child {
  top: 0;
  left: 0;
  background: #F06060;
}
.section:nth-child(2) {
  top: 0;
  left: 50%;
  background: #FA987D;
}
.section:nth-child(3) {
  top: 50%;
  left: 0;
  background: #72CCA7;
}
.section:nth-child(4) {
  top: 50%;
  left: 50%;
  background: #10A296;
}
.section.is-expanded {
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
}
.has-expanded-item .section:not(.is-expanded) {
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}

.close-section {
  ;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  width: 3rem;
  height: 3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 200ms linear;
  transition: opacity 200ms linear;
}
.section.is-expanded .close-section {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 200ms linear 300ms;
  transition: opacity 200ms linear 300ms;
}

body {
  margin: 0;
  font: 16px/1.5 'Roboto Slab', sans-serif;
  background: black;
}

.demo-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 300;
}

.content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 300;
}

html
----

<body>
   <form id="form1" runat="server">
  <main class="main">
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="demo-box" id="iddemobox1">Section 1</div>
    <div class="content-box" id="idcontentbox1">Content 1</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="demo-box">Section 2</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="demo-box">Section 3</div>
  </section>
  <section class="section">
    <div class="close-section">&times;</div>
    <div class="demo-box">Section 4</div>
  </section>
</main>
  
    <script src="js/index.js"></script>
     </form>
</body>
</html>

Friday, May 10, 2019 5:04 AM

Answers

User839733648 posted

Hi larnvok09,

According to your description and code, I've made a test on my side.

When you click the div, you will see the following error in the F12 console tab.

Uncaught TypeError: Cannot read property 'document' of undefined

The error occurs on this two lines.

wrapper.body.document.getElementById("iddemobox1").style.display = 'none';
wrapper.body.document.getElementById("idcontentbox1").style.display = 'block';

You should moddify this to:

document.getElementById("iddemobox1").style.display = 'none';
document.getElementById("idcontentbox1").style.display = 'block';

And to hide the iddemobox1 text and show the idcontentbox1, you should write the below code instead.

                function _openSection(element) {
                    if (!element.classList.contains(expandedClass)) {
                        element.classList.add(expandedClass);
                        wrapper.classList.add(hasExpandedClass);
                        document.getElementById("iddemobox1").style.display = 'none';
                        document.getElementById("idcontentbox1").style.display = 'flex';
                    }
                }

                function _closeSection(element) {
                    if (element.classList.contains(expandedClass)) {
                        element.classList.remove(expandedClass);
                        wrapper.classList.remove(hasExpandedClass);
                        document.getElementById("iddemobox1").style.display = 'flex';
                        document.getElementById("idcontentbox1").style.display = 'none';
                    }
                }

result:

Best Regards,

Jenifer

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, May 10, 2019 9:54 AM

Answered by:

javascript having display another div from one div

Question

Answers