How to Implement CSS3 Auto-Foldable Vertical Accordion Menu

How to Implement CSS3 Auto-Foldable Vertical Accordion Menu: BY Dennis13 Nov,2020; Tags:
CSS3 Menu Accordion Menu

Introduction

This time we continue to bring you a CSS3-based vertical accordion menu. In addition to the automatic folding of menu items like other accordion menus, it also has a feature that it has a smooth fade-in and fade-out effect during folding and unfolding.

How to Implement CSS3 Auto-Foldable Vertical Accordion Menu

Instructions

HTML Body Code

<div class="container collapse">
  <details>
    <summary>Accordion heading 1</summary>
    <div class="details-wrapper">
      <div class="details-styling">        
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
      </div>
    </div>
  </details>
  <details>
    <summary>Accordion heading 2</summary>
    <div class="details-wrapper">
      <div class="details-styling">        
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
      </div>
    </div>
  </details>
  <details>
    <summary>Accordion heading 3</summary>
    <div class="details-wrapper">   
      <div class="details-styling">        
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis fuga saepe sunt delectus, quo assumenda dolorum officiis odit optio modi, aspernatur necessitatibus libero, itaque repellendus. Incidunt blanditiis magni velit.</p>
      </div>
    </div>
  </details>
</div>

Css Code

.collapse-init summary + * {
  transition: all 0.25s ease-in-out;
  overflow: hidden;
}

.collapse-init :not(.panel-active) summary + * {
  height: 0;
  opacity: 0;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.collapse-init summary {
  list-style: none;
}
.collapse-init summary::-webkit-details-marker {
  display: none;
}
.collapse-init summary::before {
  display: none;
}
.collapse-init summary {
  cursor: pointer;
}

Js Code

this.settings = Object.assign({}, defaults, options);

    this._container = container;
    this._panels = container.querySelectorAll("details");

    this.events = {
      openingPanel: new CustomEvent('openingPanel'),
      openedPanel: new CustomEvent('openedPanel'),
      closingPanel: new CustomEvent('closingPanel'),
      closedPanel: new CustomEvent('closedPanel') };

  }

  _createClass(Collapse, [{ key: '_setPanelHeight', value: function _setPanelHeight(panel) {
      var contents = panel.querySelector("summary + *");

      contents.style.height = contents.scrollHeight + "px";
    }

  }, { key: '_removePanelHeight', value: function _removePanelHeight(panel) {
      var contents = panel.querySelector("summary + *");

      contents.style.height = null;
    }

  }, { key: 'open', value: function open(panel) {
      panel.dispatchEvent(this.events.openingPanel);

      panel.open = true;
    }

VIEW NOW