jQuery Mobile ການສົ່ງມູນປົກກະຕິ

Collapsible content blocks

Collapsibles allow you to hide or show content - very useful for storing part of the information.

If you want to create a collapsible content block, please assign the data-role="collapsible" attribute to a container. In the container (div), add a heading element (h1-h6), followed by any HTML tags you need to expand:

ຕົວຢ່າງ

<div data-role="collapsible">
  <h1>ການກະທຳຂອງຂ້ອຍ - ຂ້ອຍສາມາດປິດລົງ!</h1>
  <p>ຂ້ອຍແມ່ນສິ່ງທີ່ສະຫຼາດ.</p>
</div>

ທ່ານຈະຕ້ອງທຳຢູ່ຕະຫຼອດ

By default, the content is closed. If you want to expand the content when the page is loaded, please use data-collapsed="false":

ຕົວຢ່າງ

<div data-role="collapsible" data-collapsed="false">
  <h1>ການກະທຳຂອງຂ້ອຍ - ຂ້ອຍສາມາດປິດລົງ!</h1>
  <p>ຕອນນີ້ຂ້ອຍແມ່ນຖືກເປີດເຜີຍໂດຍຜູ້ສະໝັກ.</p>
</div>

ທ່ານຈະຕ້ອງທຳຢູ່ຕະຫຼອດ

Nested collapsible blocks

Collapsible content blocks can be nested:

ຕົວຢ່າງ

<div data-role="collapsible">
  <h1>ການກະທຳຂອງຂ້ອຍ - ຂ້ອຍສາມາດປິດລົງ!</h1>
  <p>ຂ້ອຍແມ່ນສິ່ງທີ່ຖືກເປີດເຜີຍ.</p>
  <div data-role="collapsible">
    <h1>ການກະທຳຂອງຂ້ອຍ - ຂ້ອຍແມ່ນບັນດາບັນທຸກສະຫຼາດທີ່ປະກອບຕົວກັນ!</h1>
    <p>ຂ້ອຍແມ່ນສິ່ງທີ່ຖືກເປີດເຜີຍໃນບັນດາບັນທຸກສະຫຼາດທີ່ປະກອບຕົວກັນ.</p>
  </div>
</div>

ທ່ານຈະຕ້ອງທຳຢູ່ຕະຫຼອດ

Tip:Collapsible content blocks can be nested as many times as you wish.

Collapsible sets

Collapsible sets (Collapsible sets) ຫວັງກວດກາບັນດາບັນທຸກສະຫຼາດທີ່ຖືກປະກອບຕົວກັນ (ປະກອບຕົວກັນວ່າ Accordion). ເມື່ອບັນດາບັນທຸກສະຫຼາດໄດ້ເປີດ, ບັນດາບັນທຸກສະຫຼາດອື່ນໆຈະປິດ.

ສ້າງບັນດາບັນທຸກຄວາມຄວາມສະຫຼາດ, ແລະຫຼັງຈາກນັ້ນຈະກວມມາດ້ວຍບັນດາບັນທຸກສະຫຼາດ data-role="collapsible-set" ເພື່ອຈັດການບັນດາບັນທຸກສະຫຼາດສະຫຼາດ.

ຕົວຢ່າງ

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>ການກະທຳຂອງຂ້ອຍ - ຂ້ອຍສາມາດປິດລົງ!</h1>
    <p>ຂ້ອຍແມ່ນສິ່ງທີ່ຖືກເປີດເຜີຍ.</p>
  </div>
  <div data-role="collapsible">
    <h1>ການກະທຳຂອງຂ້ອຍ - ຂ້ອຍສາມາດປິດລົງ!</h1>
    <p>ຂ້ອຍແມ່ນສິ່ງທີ່ຖືກເປີດເຜີຍ.</p>
  </div>
</div>

ທ່ານຈະຕ້ອງທຳຢູ່ຕະຫຼອດ

ຕົວຢ່າງອື່ນອີກ

ປ່ຽນບາງເຄື່ອງຫົວ collapsibles ດ້ວຍ data-inset
ປ່ຽນບາງເຄື່ອງຫົວ collapsibles ດ້ວຍ data-inset
ປ່ຽນບາງເຄື່ອງຫົວ collapsibles ດ້ວຍ data-mini
ພຽງແຕ່ວ່າບໍ່ມີການປ່ຽນພາສາຂອງບາງເຄື່ອງຫົວ collapsibles (ເກີບໄປ + ແລະ -).
ປ່ຽນບາງເຄື່ອງຫົວ ດ້ວຍ data-collapsed-icon ແລະ data-expanded-icon
ພຽງແຕ່ວ່າບໍ່ມີການປ່ຽນພາສາຂອງບາງເຄື່ອງຫົວ collapsibles (ເກີບໄປ + ແລະ -).