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

Εισαγωγή

Σε αυτήν την υποενότητα, θα διερευνήσουμε τη χρήση του collapse Javascript plugin μαζί με το στοιχείο της Κάρτας – Card για να δημιουργήσουμε ένα Ακορντεόν - Accordion για την εμφάνιση / απόκρυψη του περιεχομένου σε μια ιστοσελίδα.

Δείτε περισσότερα για το Accordion

Μετατροπή Tabs σε Accordion

Ανοίξτε τη σελίδα 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:

Do a Git commit

Κάντε μια  Git commit με το μήνυμα "Accordion".

Σε αυτήν την υποενότητα, κατασκευάσαμε το ακορντεόν χρησιμοποιώντας το collapse plugin μαζί με το στοιχείο της κάρτας.