The accordion/collapse component

The accordion component is probably best known for FAQ pages or pages that require a lot of content to be broken down into manageable parts. An accordion is made up of a number of panel groups. Each panel group, in turn, has a heading and body elements.

An accordion effect is created by using the Bootstrap collapse plugin which allows you to toggle content in the pages using JavaScript.

To use the accordion component in our project, perform the following steps:

  1. To allow the panel to collapse when the user clicks on its heading, we need to add a data-toggle attribute to an anchor <a> element inside the panel heading element and set its value to collapse.
  2. We also need to specify the parent element of the panel by setting the data-parent attribute's value to the ID of the parent panel group. Next, set the anchor element's href attribute to the ID of the <div> element that contains the content.
  3. Finally, we also need to set the panel body element's class to .panel-collapse collapse. In the following code, we'll create an accordion component that contains two panel groups. The first panel group will be automatically visible when the page loads because we'll set its class to .panel-collapse collapse in, as follows:
            <div class="row">         
         <div id="accordion" role="tablist" aria-multiselectable="true"> 
          <div class="panel panel-default"> 
           <div class="panel-heading" role="tab" id="headingOne"> 
            <h4 class="panel-title"> 
             <a data-toggle="collapse" data-parent= "#accordion" 
             href="#collapseOne" aria-expanded="true" 
             aria-controls="collapseOne"> 
              How do I order from you? 
              </a> 
              </h4> 
              </div> 
              <div id="collapseOne" class="panel-collapse collapse in"
              role="tabpanel" aria-labelledby="headingOne"> 
              Aliquam erat volutpat. Fusce diam neque, facilisis eu arcu               eu, vestibulum scelerisque ex. Aenean varius ornare libero at               rutrum. Nulla dapibus metus vel velit finibus, in tincidunt eros
             ornare. Sed quis dictum risus. Donec ut orci pulvinar, tincidunt 
             ipsum a, dapibus lectus. Proin dictum feugiat metus nec 
             porttitor. Proin sed diam eget lectus maximus imperdiet ac 
             consequat mauris.  
              </div> 
            </div> 
            <div class="panel panel-default"> 
              <div class="panel-heading" role="tab" id="headingTwo"> 
                <h4 class="panel-title"> 
                  <a class="collapsed" data-toggle="collapse"                 
                   data-parent="#accordion" href="#collapseTwo"         
                   aria-expanded="false" aria-controls="collapseTwo"> 
                    Do you ship internationally? 
                  </a> 
                 </h4> 
                </div> 
             <div id="collapseTwo" class="panel-collapse collapse"
              role="tabpanel" aria-labelledby="headingTwo"> 
              Fusce tortor massa, ullamcorper sit amet ligula non, suscipit
              eleifend nisi. Aenean dolor purus, rhoncus a ante nec, tempor                dapibus ex. Morbi nec pulvinar urna. Maecenas mollis consectetur 
              leo, at ullamcorper elit fermentum vel. Donec arcu neque, varius 
              quis nibh nec, aliquet elementum lacus. Interdum et malesuada 
              fames ac ante ipsum primis in faucibus. Vestibulum et rhoncus
              nisl. Mauris egestas posuere elit nec varius.  
              </div> 
             </div> 
          </div> 
        </div>

The accordion should look similar to the following images, which shows a collapsed accordion and an expanded accordion:

The accordion/collapse component
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.100.89