Submodule 10.2: Accordion
Converting Tabs to 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