Accordion
Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
 
 
<div id="accordionExample">
   <h2 class="env-ui-text-sectionheading" id="heading1">
      <a
         class="env-link"
         href="#container1"
         aria-expanded="true"
         aria-controls="container1"
         data-env-accordion
      >
         Example 1
      </a>
   </h2>
   <div
      id="container1"
      class="env-accordion env-accordion--show"
      aria-labelledby="heading1"
      data-parent="#accordionExample"
   >
      <p class="env-text-body-02">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
         lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed
         purus quam. Proin eu tincidunt metus.
      </p>
   </div>
   <h2 class="env-ui-text-sectionheading" id="heading2">
      <a
         class="env-link"
         href="#container2"
         aria-expanded="false"
         aria-controls="container2"
         data-env-accordion
      >
         Example 2
      </a>
   </h2>
   <div
      id="container2"
      class="env-accordion"
      aria-labelledby="heading2"
      data-parent="#accordionExample"
   >
      <p class="env-text-body-02">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
         lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed
         purus quam. Proin eu tincidunt metus.
      </p>
   </div>
   <h2 class="env-ui-text-sectionheading" id="heading3">
      <a
         class="env-link"
         href="#container3"
         aria-expanded="false"
         aria-controls="container3"
         data-env-accordion
      >
         Example 3
      </a>
   </h2>
   <div
      id="container3"
      class="env-accordion"
      aria-labelledby="heading3"
      data-parent="#accordionExample"
   >
      <p class="env-text-body-02">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget
         lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed
         purus quam. Proin eu tincidunt metus.
      </p>
   </div>
</div>
 
Methods
You can show, hide and toggle on available collapsible elements.
envision.accordion('#container1').then(function (accordions) {
   accordions[0].show();
});
 
envision.accordion('#container1').then(function (accordions) {
   accordions[0].hide();
});
 
envision.accordion('#container1').then(function (accordions) {
   accordions[0].toggle();
});