Menyembunyikan Sebagian Artikel Di Konten Post

Dalam kesempatan kali ini, teknologi[dot]visitklaten[dot]com akan berbagi cara menyembunyikan sebagian artikel di konten post. Kemudian apabila di klik tombol atau tulisan tertentu maka seluruh artikel akan tampil.

Desain seperti ini biasanya banyak di gunakan di aplikasi toko online, marketplace maupun lainnya. Di dalam website atau aplikasi tersebut hanya di tampilkan sebagian atau ringkasan konten saja.

Selanjutnya apabila di klik suatu tombol misalnya “lihat lainnya” maka seluruh konten akan terbuka. Dan apabila di klik tombol seperti “sembunyikan” maka akan muncul sebagian artikel saja dan seterusnya.

Dalam hal ini kami akan membuatnya menggunakan metode jQuery toggle() dan tanpa menggunakan plugin.

Salah satu keuntungan menggunakan fitur ini yaitu meringkas atau menyederhanakan tampilan suatu single post dalam suatu website atau aplikasi. Tampilan tidak terlalu panjang karena artikel yang banyak.

Yuk langsung saja kita simak penjelasan dari kami. Dalam hal ini kami menggunakan tambahan CSS dari bootstrap. Sobat tinggal copy paste saja dan sedikit penyesuaian.

Kami mengucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktunya untuk mengunjungi web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web teknologi[dot]visitklaten[dot]com ini dan diri kami menjadi lebih baik dan lebih baik lagi.

Menyembunyikan Sebagian Artikel Di Konten Post

Misalnya kontennya di dalam post atau backend adalah seperti ini. Dengan catatan kita gunakan tanda “###=” untuk pemisah artikel dan bisa diganti dengan yang lain sesuai keinginan (optional). 

Pemisah tersebut agar bisa membagi konten menjadi 2 bagian.

<p>Bagian Pertama</p>
<p>Tulisan ini hanyalah sekadar contoh dari bagian pertama atau ringkasan. Selanjutnya bisa diganti dengan artikel lain atau metode lain</p>
<p>###=</p>
<p>Bagian Akhir</p>
<p>Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain. 
2. Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain.</p>
<p>3. Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain. 
4. Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain.</p>

Maka untuk menampilkannya atau di frontend bisa menggunakan cara seperti ini. Konten dibagi dulu menjadi 2 bagian menggunakan PHP “explode”.

<div class="showkonten-frame">
<?php     
$showkonten = "<p><b>Bagian Pertama</b></p>
<p>Tulisan ini hanyalah sekadar contoh dari bagian pertama atau ringkasan. Selanjutnya bisa diganti dengan artikel lain atau metode lain</p>
<p>###=</p>
<p><b>Bagian Akhir</b></p>
<p>Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain. 
2. Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain.</p>
<p>3. Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain. 
4. Tulisan ini hanyalah sekadar contoh dari lanjutan bagian pertama. Selanjutnya bisa diganti dengan artikel lain atau metode lain.</p>"; 

$showfronted = explode('###=',$showkonten);
echo '<div class="showfronted1">'.$showfronted[0].'</div>';
echo '<div class="showfronted2" style="display:none;">'.$showfronted[1].'</div>';
?>

<div class="showkonten-btn">
    <button class="btn btn-outline-primary btn-block btn1">Lihat Lainnya<i class="fa fa-angle-down pl-2" aria-hidden="true"></i></button>
    <button class="btn btn-outline-warning btn-block btn2" style="display:none;">Sembunyikan<i class="fa fa-angle-up pl-2" aria-hidden="true"></i></button>
</div>
</div>

Terakhir jangan lupa untuk menambahkan JavaScript agar tombol berfungsi

jQuery(document).ready(function($){
$(".showkonten-frame .showkonten-btn").click(function(){
  $(".showkonten-frame .showfronted2").slideToggle('slow');
  $(".showkonten-frame .showkonten-btn .btn1").fadeToggle('slow');
  $(".showkonten-frame .showkonten-btn .btn2").fadeToggle('slow');
});
});

Untuk tampilannya bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.