Css - How to optimize hide/reveal divs with minimum number of code

AkhilThomas
October 1, 2023
282 views
0 votes
2 Answers

i want use the same code for multiple modules in this page and i already tried some different method but nothing seem to be working. i don’t want to duplicate the existing codes infinitely,

document.addEventListener('DOMContentLoaded', function () {
  const arrowDown = document.getElementById('arrow-down');
  const contentContainer = document.getElementById('content-container');

  arrowDown.addEventListener('click', function () {
    const content = document.getElementById('content');

    if (contentContainer.style.maxHeight) {
      contentContainer.style.maxHeight = null;
      arrowDown.style.transform = 'rotate(0deg)';
    } else {
      contentContainer.style.maxHeight = content.scrollHeight + 'px';
      arrowDown.style.transform = 'rotate(180deg)';
    }
  });
});

#content-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

#content {
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#arrow-down {
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.3s ease-out;
}

<div class="module-sub container">
  <div class=" d-flex justify-content-between">
      <div class="module-heading">
          EXCEL
      </div>
      <div id="arrow-down" class="module-arrow">▼</div>
  </div>
  <div id="content-container">
      <div id="content" class="mod-content">
          <ul>
              <li>Excel Basics</li>
              <li>Excel Essentials</li>
              <li>Formulae</li>
              <li> Data Analysis</li>
              <li>Charts</li>
              <li>Pivot Tables</li>
              <li>Lookup</li>
          </ul>
      </div>
  </div>
</div>

I tried using for loops and classes but nothing worked the animation and content reveal didn’t work

Answers

You need to use class names instead of ID’s for the most part. Once you do that, just loop over the outer elements, and then within that loop you can find the inner elements.

What I mean is when you use document.getElementBy* functions, you can provide a different starting point than document. If you only want it to find certain elements inside of a given element you can use myElement.getElementBy*

Here’s a working example. I switched everything to CSS classes, and I’m using querySelectorAll and querySelector beause I find that simpler to work with.

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.module-sub')
    .forEach((mod) => {
      const arrowDown = mod.querySelector('.module-arrow');
      const contentContainer = mod.querySelector('.mod-content-container');

      arrowDown.addEventListener('click', function () {
        const content = mod.querySelector('.mod-content');

        if (contentContainer.style.maxHeight) {
          contentContainer.style.maxHeight = null;
          arrowDown.style.transform = 'rotate(0deg)';
        } else {
          contentContainer.style.maxHeight = content.scrollHeight + 'px';
          arrowDown.style.transform = 'rotate(180deg)';
        }
      });
    });
});

.mod-content-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

.mod-content {
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.module-arrow {
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.3s ease-out;
}

<div class="module-sub container">
  <div class="d-flex justify-content-between">
      <div class="module-heading">
          EXCEL
      </div>
      <div class="module-arrow">&#9660;</div>
  </div>
  <div class="mod-content-container">
      <div class="mod-content">
          <ul>
              <li>Excel Basics</li>
              <li>Excel Essentials</li>
              <li>Formulae</li>
              <li> Data Analysis</li>
              <li>Charts</li>
              <li>Pivot Tables</li>
              <li>Lookup</li>
          </ul>
      </div>
  </div>
</div>

<div class="module-sub container">
  <div class="d-flex justify-content-between">
      <div class="module-heading">
          WORD
      </div>
      <div class="module-arrow">&#9660;</div>
  </div>
  <div class="mod-content-container">
      <div class="mod-content">
          <ul>
              <li>Word Basics</li>
              <li>Word Essentials</li>
              <li>Paragraphs</li>
              <li>Pages</li>
          </ul>
      </div>
  </div>
</div>

By adding an event listener to each element with the ID "arrow-down", looping through each item with that ID, and then toggling a max-height property on the elements with the ID "content-container". This allows multiple elements to be toggled on and off on a webpage without the use of classes.

document.addEventListener('DOMContentLoaded', function() {
  const arrowDowns = document.querySelectorAll('#arrow-down');

  arrowDowns.forEach((arrow, index) => {
    arrow.addEventListener('click', function() {
      const contentContainers = document.querySelectorAll('#content-container')[index];
      const content = document.querySelectorAll('#content')[index];
      contentContainers.style.maxHeight = contentContainers.style.maxHeight ? null : content.scrollHeight + 'px';
      arrow.style.transform = arrow.style.transform ? 'rotate(0deg)' : 'rotate(180deg)';
    });
  });
});

#content-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

#content {
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#arrow-down {
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.3s ease-out;
}

<div class="module-sub container">
  <div class=" d-flex justify-content-between">
      <div class="module-heading">
          EXCEL-1
      </div>
      <div id="arrow-down" class="module-arrow">&#9660;</div>
  </div>
  <div id="content-container">
      <div id="content" class="mod-content">
          <ul>
              <li>Excel Basics</li>
              <li>Excel Essentials</li>
              <li>Formulae</li>
              <li> Data Analysis</li>
              <li>Charts</li>
              <li>Pivot Tables</li>
              <li>Lookup</li>
          </ul>
      </div>
  </div>
</div>

<div class="module-sub container">
  <div class=" d-flex justify-content-between">
      <div class="module-heading">
          EXCEL-2
      </div>
      <div id="arrow-down" class="module-arrow">&#9660;</div>
  </div>
  <div id="content-container">
      <div id="content" class="mod-content">
          <ul>
              <li>Excel Basics</li>
              <li>Excel Essentials</li>
              <li>Formulae</li>
              <li> Data Analysis</li>
              <li>Charts</li>
              <li>Pivot Tables</li>
              <li>Lookup</li>
          </ul>
      </div>
  </div>
</div>

<div class="module-sub container">
  <div class=" d-flex justify-content-between">
      <div class="module-heading">
          EXCEL-3
      </div>
      <div id="arrow-down" class="module-arrow">&#9660;</div>
  </div>
  <div id="content-container">
      <div id="content" class="mod-content">
          <ul>
              <li>Excel Basics</li>
              <li>Excel Essentials</li>
              <li>Formulae</li>
              <li> Data Analysis</li>
              <li>Charts</li>
              <li>Pivot Tables</li>
              <li>Lookup</li>
          </ul>
      </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How to optimize hide/reveal divs with minimum number of code

Answers