Κουτί Αναδίπλωσης του jQuery Mobile

Οι ανακλινόμενες περιεχόμενες μονάδες

Οι ανακλινόμενες (Collapsibles) επιτρέπουν να κρύψεις ή να δείξεις περιεχόμενο - χρήσιμο για την αποθήκευση μέρους πληροφοριών.

Για να δημιουργήσεις ανακλινόμενα περιεχόμενα μπλοκ, δώσε στο κουτί data-role="collapsible". Στο κουτί (div), προσθέσε ένα στοιχείο τίτλου (h1-h6) και μετά οποιαδήποτε HTML ετικέτα που θέλεις να επεκτείνεις:

Παράδειγμα

<div data-role="collapsible">
  <h1>Κάνε κλικ σε μένα - Μπορώ να κλείσω!</h1>
  <p>Είμαι το ανακλινόμενο περιεχόμενο.</p>
</div>

Προσπάθησε το ίδιο

Προεπιλεγμένα, το περιεχόμενο είναι κλειστό. Αν θέλεις να επεκτείνεις το περιεχόμενο κατά την φόρτωση της σελίδας, χρησιμοποίησε data-collapsed="false":

Παράδειγμα

<div data-role="collapsible" data-collapsed="false">
  <h1>Κάνε κλικ σε μένα - Μπορώ να κλείσω!</h1>
  <p>Τώρα είμαι προεπιλεγμένα ανοιχτό.</p>
</div>

Προσπάθησε το ίδιο

Ανακλινόμενα μπλοκ ενσωματωμένα

Μπορούν να ενσωματωθούν ανακλινόμενες περιεχόμενες μονάδες:

Παράδειγμα

<div data-role="collapsible">
  <h1>Κάνε κλικ σε μένα - Μπορώ να κλείσω!</h1>
  <p>Είμαι το περιεχόμενο που ανοίγει.</p>
  <div data-role="collapsible">
    <h1>Κάνε κλικ σε μένα - Είμαι το ανακλινόμενο μπλοκ που είναι ενσωματωμένο!</h1>
    <p>Είμαι το περιεχόμενο που ανοίγει στο ανακλινόμενο μπλοκ που είναι ενσωματωμένο.</p>
  </div>
</div>

Προσπάθησε το ίδιο

Συμβουλή:Οι ανακλινόμενες περιεχόμενες μονάδες μπορούν να τοποθετηθούν όσο χρειάζεται επίπεδο.

Συλλογές ανακλινόμενων

Οι συλλογές ανακλινόμενων (Collapsible sets) αναφέρονται στις ανακλινόμενες μονάδες που συνδυάζονται μαζί (κοινώς αποκαλούνται φλογερόφωνο). Όταν ανοίγει νέο μπλοκ, όλα τα άλλα κλείνουν.

Δημιούργησε αρκετά περιεχόμενα και στη συνέχεια πακέτασε αυτό το ανακλινόμενο μπλοκ με νέο κουτί:

Παράδειγμα

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Κάνε κλικ σε μένα - Μπορώ να κλείσω!</h1>
    <p>Είμαι το περιεχόμενο που ανοίγει.</p>
  </div>
  <div data-role="collapsible">
    <h1>Κάνε κλικ σε μένα - Μπορώ να κλείσω!</h1>
    <p>Είμαι το περιεχόμενο που ανοίγει.</p>
  </div>
</div>

Προσπάθησε το ίδιο

Περισσότερα παραδείγματα

Αφαίρεση γωνιών με την ιδιότητα data-inset
Πώς να αφαιρέσετε τις γωνίες από τα collapsibles.
Απλοποίηση των collapsibles με data-mini
Πώς να κάνετε τα collapsibles πιο μικρά.
Αλλαγή εικονιδίων με data-collapsed-icon και data-expanded-icon
Πώς να αλλάξετε τα εικονίδια των collapsibles (στο προεπιλεγμένο είναι + και -).