Υποενότητα 4.2: Ακορντεόν

Ανοίξτε τη σελίδα aboutus.html και μεταβείτε στη δεύτερη σειρά περιεχομένων που περιέχει τις λεπτομέρειες της.

Καταργήστε πρώτα την κλάση <ul> που εισήχθη για την πλοήγηση με καρτέλες.

TΣτη συνέχεια, γυρίστε το div tab content σε a accordion div. Χρησιμοποιήστε τη δομή του κώδικα όπως φαίνεται παρακάτω:

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

Στη συνέχεια, μετατρέψτε το πρώτο tab-pane σε μια κάρτα- card έτσι ώστε το όνομα να εμφανίζεται ως  card heading, και το <p> θα βρίσκεται στοcard body. Χρησιμοποιήστε τη δομή του κώδικα όπως φαίνεται παρακάτω:

<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>

Για τον επόμενο leader, χρησιμοποιήστε την επόμενη δομή, με τα κατάλληλα ids που έχουν οριστεί για τις κάρτες, όπως φαίνεται στη δομή κώδικα παρακάτω: 

<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>

Για τους υπόλοιπους τρεις leaders, χρησιμοποιήστε την ίδια δομή όπως παραπάνω, με τα κατάλληλα IDs που έχουν ρυθμιστεί για τις κάρτες:

Μπορείτε εναλλακτικά να αντιγράψετε και να επικολλήσετε όλο τον κώδικα του ακορντεόν

Accordion code: