Submodule 10.2: Accordion

Open the aboutus.html page and move to the second content row containing the details of the corporate leadership of the restaurant.

First delete the <ul> class that was introduced for the tabbed navigation.

Then turn the tab-content div into a accordion div. Use the code structure as shown below: 

<div id="accordion" >
 . . .
</div>

Then, convert the first tab-pane into a card such that the name appears as a card heading, and the <p> will be in the card body. Use the structure of the code as shown below:

<div class="card">
  <div class="card-header" id="headingOne">
     <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
       <h4>Jim Alcon <small>Chief Executive Officer </small></h4>
     </button>
   </div>
   <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
     <div class="card-body">
       <p class="col d-none d-sm-block">Jim Alcon is the CEO of our company. He is responsible for the policy and strategy of our company. </p>
     </div>
  </div>
 </div>

For the next leader, use the next structure, with the appropriate ids set up for the cards, as shown in the code structure below: 

<div class="card">
  <div class="card-header" id="headingTwo">
     <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
       <h4>Bill Peterson <small>Chief Financial Officer </small></h4>
     </button>
   </div>
   <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
     <div class="card-body">
       <p class="col d-none d-sm-block">Bill Peterson is the CFO of our company. He is responsible for all the financial decisions of our company. </p>
     </div>
   </div>
 </div>

For the remaining three leaders, use the same structure as above, with the appropriate ids set up for the cards: 

You can alternatively copy and paste all the accordion code

Accordion code: