Cara Membuat Show Hide Artikel Di Blog

BAHASTUTORIAL.COM - Tutorial kali ini kita bakal bahas tentang "Cara Membuat Show Hide Artikel Di Blog".
Fungsi dari show hide artikel ini adalah ketika kita membuat sebuah postingan maka yang tampil hanya button saja. Jika button nya di klik maka artikel bakalan muncul. dan jika button itu di klik kedua kalinya maka artikelnya akan menghilang. Cocok banget buat kalian yang hobi untuk mempercantik sebuah blog kalian


Langsung saja ke tutorial ya ..

1. Masuk ke edit html
2. Kode pada table css simpan di atas kode </b:skin> atau </style>
3. Kode pada table html simpan di postingan pada mode html.
4. Kode pada table javascript simpan di atas kode </body> atau </head>.
5. Lalu Simpan

CSS

 
 
.centerflip{
  text-align: center;
}

.flippy {
    text-align: center;
}

button.flippy {
    background: #aa65c7;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #883da7;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}

.flippy button:hover {
    background: #9e4fbf;
    outline: none;
}

.flippy button:focus {
    background: #9e4fbf;
    outline: none;
}

.flippanel {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}

.flippanel {
    padding: 24px;
    display: none;
}

JAVASCRIPT

 

<script style='text/javascript'>
$(function(){
  $(&quot;.flippy&quot;).on(&quot;click&quot;, function(){
    $(this).parent().children(&quot;.flippanel&quot;).slideToggle(&quot;normal&quot;);
  });
});
</script>

HTML

<div class="centerflip">
<button class="flippy">BACA ARTIKEL</button>
<div class="flippanel">
<p class="texty">Judul Artikel</p>
<p>Isi Dengan Isi Artikel</p>     
</div> 
</div>

Notes

- Semua tutorial di situs bahastutorial sudah di test dan hasilnya berjalan dengan baik.
- Silahkan isi artikel dan gambar kalian di "Isi Dengan Isi Artikel"

Bagaimana tutorial diatas apakah sudah jelas atau masih ada yang kurang jelas.
Jika ada yang masih kurang paham kalian bisa tanyakan langsung di kolom komentar.
Admin akan merespon dan memberikan solusi agar kalian bisa menjalankanya dengan benar.

Jangan lupa share artikel ini ke media sosial kalian yah. Semoga Bermanfaat ..

Demo
Click here