amp-accordion - Cara Menggunakan di AMP HTML

AMP Halwa RF December 3, 2018

accordion biasanya digunakan untuk menampilkan dan menyembunyikan element HTML atau "lompat" dari satu bagian ke bagian yang lain. Ini, dimaksudkan untuk mendapatkan tampilan (interface) yang lebih baik, khususnya untuk perangkat mobile, ukuran layar kecil dan sejenisnya.

Quick Example
Contoh

SOURCE
demo 
<amp-accordion>
  <section>
    <h4>Section 1</h4>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h4>Section 2</h4>
    <div>
      <p>Content in section 2.</p>
    </div>
  </section>
</amp-accordion>

Description
Penjelasan

amp-accordion element digunakan pada sebuah element yang memerlukan interface untuk dapat ditampilkan atau disembunyikan. Kebutuhan ini, biasanya terjadi seperti... apabila kita hanya ingin menampilkan teks pendek, kemudian kita sediakan link/tombol yang apabila diklik, maka akan terbuka teks utuh (lengkap) yang sesungguhnya tanpa harus me-reload (memuat ulang) halaman yang sedang terbuka. Tentunya, masih banyak kegunaan lainnya yang serupa.

Element yang dapat disembunyikan dan ditampilkan disebut dengan istilah Collapsable dan Expandable.

Dalam amp-accordion, setiap konten atau element yang terletak langsung didalamnya (direct children) dianggap sebagai bagian (section) dari accordion tersebut. Oleh karenanya, element ini harus menggunakan tag <section> dan boleh terdapat lebih dari satu section.

Pada setiap bagian (section) hanya boleh ada dua element (direct children). Jika Element pertama (collapsable) diklik maka element kedua (expandable) akan terbuka.

Setup
Cara Penggunaan

Sisipkan script dibawah ini dan letakkan sebelum tag </head> pada template blog atau website Anda.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Selanjutnya, gunakan code snippet contoh dibawah ini:

<amp-accordion>
  <section>
    <h4>Section 1</h4>
    <p>Content in section 1.</p>
  </section>
</amp-accordion>

Perhatikan contoh kode diatas, <h4> (boleh diganti, pilih h1 sampai h6) adalah heading, sedangkan <p> (boleh diganti dengan element lain yang support) adalah konten yang disembunyikan. Apabila <h4> diklik/tap, maka seluruh konten pada <p> element akan ditampilkan.

Perhatian

Didalam element <section> contoh diatas, hanya boleh ada 2 element (contoh di atas adalah <h4> dan <p>) yang posisinya sebagai direct children ("anak langsung" dari section element).

Attributes
amp-accordion

disable-session-states Attribute

Pada sebuah sesi dimana kita telah melakukan interaksi terhadap amp-accordion component baik itu membuka (expand) maupun menutup (collapse) element, maka interaksi terakhir akan disimpan dalam sebuah sesi (session). Jadi, ketika halaman dimuat ulang (reload) maka keadaan accordion (accordion state) sama seperti terakhir kali kita mengklik (expand/collapse). Nah, jika attribute disable-session-states ditulis, maka keadaan tersebut tidak berlaku (tidak disimpan dalam sebuah sesi).

Contoh

SOURCE
demo 
<amp-accordion disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>
      <p>Content in section 2.</p>
      <amp-img alt="" layout="responsive" width="883" height="500" tabindex="0" src="/media/images/amp-bg.jpg"><noscript><div class="img-responsive"><img src="/media/images/amp-bg.jpg" alt="" /></div></noscript></amp-img>
    </div>
  </section>
</amp-accordion>
expanded Attribute

Jika attribute ini ditulis maka bagian (section) pada accordion tersebut akan terbuka (expanded) secara otomatis ketika halaman selesai dimuat. Berikut contohnya:

Contoh

SOURCE
demo 
<amp-accordion>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section expanded>
    <h2>Section 2</h2>
    <div>
      <p>Content in section 2. I have Expanded Attribute.</p>
    </div>
  </section>
</amp-accordion>

Styling
Memberi Style (CSS)

Dibawah ini adalah contoh lain yang di-custom menggunakan CSS.

CSS 
amp-accordion section[expanded] .show {
  display: none;
}
amp-accordion section:not([expanded]) .hide {
  display: none;

}
amp-accordion section:not([expanded])>h4 {
  background: green;
  color: #fff;
}
amp-accordion section[expanded]>h4 {
  background: tomato;
  color: #fff;
}
SOURCE
demo 
<amp-accordion>
  <section>
    <h4>
      <span class="show">Show/Tampilkan</span>
      <span class="hide">Hide/Sembunyikan</span>
    </h4>
    <p>Hello World! Have a nice day!</p>
  </section>
</amp-accordion>

Additional Information and Resources
SHARE
Previous Article