Menambahkan Fungsi Accordion Tab pada Amp Blog

Fungsi dari accordion tab biasa dipakai untuk membagi informasi atau info dokumen lainnya termasuk video, artikel, gambar dan sebagainya kedalam dua bagian, maksudnya adalah sebuah artikel dapat disembunyikan dan di tampilkan dengan fungsi accordion ini, sehingga isi lengkap dari dokumen artikel  tersebut akan tampil jika kita mengklik tombol yang dibuat. (Terjemah bebas by antoncabon).
Menambahkan fungsi accordion tab pada Amp HTML dapat dilakukan dengan langkah-langkah yang saya tuliskan dibawah ini.

Langkah Pertama

Salin dan letakan kode dibawah ini sebelum tag </head> lalu simpan template anda.

<style amp-custom="amp-custom">

section[expanded] .show-more {display: none;}

section:not([expanded]) .show-less {display: none;}

</style>

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

Langkah Kedua

Tambahkan element HTML pada blog anda atau pada sidebar terserah, lalu salin dan sisipkan kode fungsi accordion dibawah ini pada area HTML anda tersebut.

<amp-accordion>


    <section expanded="expanded">


      <h4>Video</h4>


      <p>Silahkan anda ganti dengan tag amp-video.</p>


    </section>


    <section>


      <h4>Images</h4>


      <div>Silahkan ganti img dengan amp-img


        <code>Tambahkan kode DISINI 
</code>.</div>


    </section>


    <section>


      <h4>Tab Gambar (Images)</h4>


      <figure>


        <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzy4o4E5fegvsU0nOj-7Byg89aMF4Au4PpKPQY655SRL0chyphenhyphen4ZXrnsW7_Ovt6s7krtjY7BjqWHZIQo-cZoR7g0zex-VPs5FfGefGzoCK346F63VpuEnngUUZ1lzFgIPwNxet6ITWTneMxy/s1600/accordion-tab-amp-antoncabon.jpg"


            width="700"


            height="400"


            layout="responsive"


            alt="an image"></amp-img>


        <figcaption>Menambahkan fungsi</figcaption>


      </figure>


    </section>


  </amp-accordion>

Untuk demo silahkan perhatikan bagian sidebar pada blog demo berikut ini:

Demo

Bagaimana cukup mudah bukan, selamat mencoba dan semoga bermanfaat, salam antoncabon.