Cara Membuat Tombol Hide & Show Paling Mudah dan Sederhana

Membuat Tombol Hide & Show Paling Mudah dan Sederhana - Hai sahabat blogger, kali ini saya akan berbagi sedikit pengalaman ketika saya belajar dan mencoba membuat tombol hide and show di dalam postingan. Fungsi dari hide and show (spoiler) yang dimaksud di sini adalah sesuai dengan makna dari kata tersebut, yaitu membuat tombol yang bisa dilihat ketika di klik dan juga tersembunyi ketika di klik.

Adapun tujuan dari pembuatan tombol hide & show ini sangat beragam sesuai kebutuhan masing-masing. Namun pada dasarnya adalah untuk membuat postingan atau tulisan artikel supaya tidak terlalu panjang, menyembunyikan gambar agar loading blog tidak terlalu berat, dan lain sebagainya. Dan tujuan saya sendiri membuat tombol hide & show adalah untuk menyertakan sumber artikel yang saya tulis. Jadi ketika tombol di klik maka dari mana sumber artikel yang saya tulis bisa terlihat. Untuk contoh jelasnya bisa teman-teman lihat di akhir postingan ini.

Sebenarnya sudah banyak di luar sana para mastah yang menjelaskan membuat tombol hide and show secara lengkap. Namun tidak ada salahnya juga kan jika saya ikut berbagi? Paling tidak bisa menjadi dokumentasi saya pribadi, terlebih bermanfaat bagi sahabat yang membutuhkan di sana.

Nah, karena saya bukan seorang blogger profesional yang ahli bahasa pemrograman web, maka di sini saya hanya akan berbagi cara membuat tombol hide & show yang paling mudah dan sederhana. Kemungkinan besar sangat cocok bagi teman-teman yang baru terjun di dunia blogging yang ingin semakin kreatif mempercantik template blog sendiri.

Langkah Membuat Hide & Show di dalam Postingan

Bagaimana caranya? Sangat mudah kok, yaitu cukup menambahkan jQuery, CSS, dan JavaScript di dalam template serta memanggilnya dengan sedikit kode HTML di dalam postingan. Semua kodenya ada di sini dan saya yakin teman-teman bisa langsung menerapkannya. Lebih jelasnya silahkan ikuti langkah-langkah berikut:

1. Tambahkan jQuery Library sebelum </head>

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Karena tutorial yang saya bagikan ini menggunakan jQuery, maka teman-teman wajib menambahkan jQuery Library di dalam template berapapun versinya. Jika sudah ada maka abaikan saja. Gunakan tombol CTRL + F kemudian ketik kode nya untuk mempermudah pencarian.

2. Tambahkan CSS Spoiler berikut sebelum </style>

#sumber button {border: none;font-size: 12px;font-weight: normal;border-radius: 1px;padding: 4px 10px;text-decoration: none;background: #b6c472;color: #fefefe;display: inline-block;transition: all 0.5s linear;cursor: pointer;}
#sumber button:hover{background:#a0ad64;color:#fefefe;transition:all 0.2s linear}
#sumber button:active{background:#a0ad64;color:#fefefe}
#ketsumber {padding: 1px;width: 100%;text-align: left;background: #f5f5f5;border: 0px;padding: 24px;display: none;}

Di atas merupakan contoh kode CSS untuk tampilan tombol hide & show sederhana yang saya buat. Teman-teman bisa mengembangkan sendiri untuk memperindah tampilan. Jadi untuk merubah tampilan sesuai selera bisa teman-teman edit sendiri pada kode CSS ini. Semakin kreatif dan inovatif maka semakin cantik tampilan tombol yang dihasilkan.

3. Tambahkan JavaScript berikut sebelum </body>

<script type='text/javascript'>
//<![CDATA[
  $(document).ready(function() {
      $("#sumber").click(function() {
        $("#ketsumber").slideToggle("normal");
      })
   });
//]]>
</script>

Sekarang tambahkan javascript di atas tepat sebelum kode </body> dan perhatikan antara id atau kode pemanggil yang ada pada javascript dan kode yang dipanggil yang ada pada CSS, yaitu kode #sumber dan #ketsumber keduanya (yang ada di CSS dan javascript) harus sama. Jadi jika teman-teman ingin merubahnya maka harus diubah keduanya.

4. Tambahkan HTML berikut di dalam postingan

<div id="sumber">
<button>Sumber</button></div>
<div id="ketsumber">
<i>NAMA BLOG, TAHUN, JUDUL ARTIKEL, [online], (alamat blog), diakses tanggal.</i></div>

Langkah terakhir adalah menambahkan kode di atas postingan yang HTML (bukan compose) untuk memfungsikan seluruh kode yang sudah kita pasang di dalam template. Jadi kode yang ada pada langkah 1 sampai tiga kita tambahkan dan pasang di dalam template sedangkan pada langkah lima kita tambahkan di dalam postingan ketika membuat entri baru. Ingat! tambahkan di HTML bukan di compose.

Demikian cara membuat tombol hide & show (spoiler) paling mudah dan sederhana yang bisa saya bagikan. Bagaimana? Mudah kan? Bisa jadi susah jika sahabat hanya membacanya saja, dan menjadi sangat mudah apabila sahabat langsung mempraktekannya.

Baca juga:

• Cara Membuat Banyak Blockquote Keren Di Dalam Satu Postingan

Seperti apa contoh hasil dari penerapan seluruh kode di atas? Karena postingan ini saya ambil dari beberapa sumber, maka saya sertakan juga sumbernya sekaligus menjadi contoh fungsi dari tombol hide & show yang ada di atas. Silahkan lihat sumber di bawah.

• Kompi Ajaib, 2014, Show Hide Content Dengan Jquery Di Postingan, [online], (https://www.kompiajaib.com/2014/08/show-hide-content-dengan-jquery-di.html), diakses tanggal 31 Desember 2017.
• Arlina Design, Memasang Spoiler di Postingan, [online], (https://www.arlinadzgn.com/2014/11/memasang-spoiler-di-postingan.html), diakses tanggal 31 Desember 2017.