BERANDA Berbagi Ilmu Kumpulan Tombol Show Dan Hide Responsive

Kumpulan Tombol Show Dan Hide Responsive

Diterbitkan
Tags

Dengan menggunakan tombol show dan hide, anda dapat mengurangi beban loading halaman website atau blog yang anda kelola. 
Yakni dengan cara membuat tombol show untuk menampilkan konten, dan tombol hide untuk menyembunyikan konten, seperti : teks atau tulisan, gambar, video, dan lain-lain.


Membuat tombol show hide pada artikel blog merupakan solusi yang tepat jika anda memiliki artikel yang sangat panjang. Dari sekian banyak tombol show hide yang bisa kita dapat dari blog orang lain, ada baiknya juga anda mencoba tombol show hide yang saya bagikan ini.

 Di bawah ini saya menyediakan beberapa contoh tombol show dan hide yang bisa anda coba, berikut adalah Kumpulan Tombol Show Dan Hide Responsive :

1. TOMBOL A

Kode :
<script language="javascript">
function toggle() {
var ele = document.getElementById("Sembunyikan");
var text = document.getElementById("Tampilkan");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Tampilkan";
}
else {
ele.style.display = "block";
text.innerHTML = "Sembunyikan";
}
}
</script>
<a href="javascript:toggle();" id="Tampilkan" rel="nofollow" style="border: 1px solid #000000; font-family: &quot;josefin sans&quot; , serif; font-size: 16px; height: auto; padding: 2px; text-decoration: none; width: auto;">Tampilkan</a>
<br />
<div id="Sembunyikan" style="border: 1px solid #666666; display: none; margin-bottom: 15px; padding: 10px; width: 280px;">
TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI</div>

Hasilnya :

Tampilkan


2. TOMBOL B

Kode :
<div style="margin: 0 auto; text-align: left;">
<div class="nagastar" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-family: &quot;josefin sans&quot; , serif; font-size: 16px; padding: 2px;" type="button" value="Show" />
</div>
<div class="nagastar2" style="border: 2px inset; padding: 10px; solid: #000000; width: 280px;">
<div style="display: none;">
TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI</div>
</div>
</div>

Hasilnya :

TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI


3. TOMBOL C

Kode :
<div id="Button" style="font-family: &quot;josefin sans&quot; , serif; font-size: 16px; margin: 0 auto; padding: 2px; text-align: left;">
<input onclick="document.getElementById('Content').style.display='block';Button.style.display='none';" type="button" value="Buka" />
</div>
<div id="Content" style="background: #fff; border: 2px solid #aaa; box-shadow: 0px 1px 3px 0px rgba(179 , 179 , 179 , 1); display: none; margin: 0 auto; padding: 10px; text-align: center; width: 280px;">
TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI
<br />
<input onclick="document.getElementById('Content').style.display='none';Button.style.display='block';" type="button" value="Tutup" />
</div>

Hasilnya :



4. TOMBOL D

Kode :
<div id="spoiler">
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" style="font-family: &quot;josefin sans&quot; , serif; font-size: 16px; margin: 0px; padding: 2px; width: auto;" type="button" value="Tampilkan" /></div>
<div class="alt2" style="background: #6a5acd none repeat scroll 0% 0%; border: 2px solid white; color: white; margin: 0px; padding: 2px; text-align: center; width: 280px;">
<div style="display: none;">
TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI
</div>
</div>
</div>
</div>

Hasilnya :

TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI


5. TOMBOL E

Kode :
<div id="nagastar2" style="display: none;">
TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI</div>
<button onclick="if(document.getElementById('nagastar2') .style.display=='none') {document.getElementById('nagastar2') .style.display=''}else{document.getElementById('nagastar2') .style.display='none'}" style="background: #6a5acd; color: white; font-family: &quot;josefin sans&quot; , serif; font-size: 16px; padding: 4px; width: auto;" title="Klik Untuk Melihat" type="button">Show/Tutup</button>

Hasilnya :



6. TOMBOL F

Kode :
<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="color: slateblue; font-family: &quot;josefin sans&quot; , serif; font-size: 12px; margin: 0px; padding: 2px; width: auto;" type="button" value="BUKA" />
</div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
TERIMA KASIH<br />
TELAH BERKUNJUNG<br />
KE<br />
BLOG INI
</div>
</div>
</div>

Hasilnya :

TERIMA KASIH
TELAH BERKUNJUNG
KE
BLOG INI


7. TOMBOL G

Kode :
<script type="text/javascript">
        function showHideContent(id){           if(document.getElementById(id).style.display==""){                 document.getElementById(id).style.display="none";
             }else{                 document.getElementById(id).style.display="";
             }
       } 
    </script>             
<br />
<div id="contents">
<a href="javascript:;" onclick="showHideContent('contents_hide')">
                      </a>
<br />
<center>
<a href="javascript:;" onclick="showHideContent('contents_hide')"><b>Tentang Saya</b></a></center>
<a href="javascript:;" onclick="showHideContent('contents_hide')">
           </a>         
<br />
<div id="contents_hide">
Nama Blog    : Lazio Alfaro<br />
Nama Penulis : Naga Star<br />
Alamat       : Indonesia</div>
</div>
<script type="text/javascript">
        showHideContent('contents_hide');
    </script>

Hasilnya :


Tentang Saya
Nama Blog : Lazio Alfaro
Nama Penulis : Naga Star
Alamat : Indonesia


8. TOMBOL H

Kode :
<div id="spoiler3" style="display: none;">
TERIMA KASIH TELAH BERKUNJUNG KE BLOG INI</div>
<button onclick="if(document.getElementById('spoiler3') .style.display=='none') {document.getElementById('spoiler3') .style.display=''}else{document.getElementById('spoiler3') .style.display='none'}" style="background: white; border: 3px double #6a5acd; color: slateblue; font-family: &quot;josefin sans&quot; , serif; font-size: 12px; padding: 4px 2px 2px 2px;" type="button">SHOW / HIDE</button>

Hasilnya :



9. TOMBOL UNTUK GAMBAR

Kode :
<script src="jquery-1.7.min.js" type="text/javascript"></script>
 <script>
 $(document).ready(function(){
        $('.gambar').hide();       
        $('.Open').click(function(){
   $('.gambar').show();
        });
        $('.Close').click(function(){
   //Sembunyikan elemen class gambar
   $('.gambar').hide();     
        });
 });
 </script>
<input class="Open" type="button" value="Open" />
<input class="Close" type="button" value="Close" />
 <div class="gambar">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZzL1GfWqZbgJEo6Dyakrmcqi0sbTiVUUov85q777vTSjs7o-Cvz4tncwMPZzXa6pyr8j4l9B3UcdGrsri9_uym4OFuVfOmzuPZGsNwrRhlVlW-u_9wgzBi8Mq3iT6twhy_zQHQuu690F/s320/Naga+Star.png" />
 </div>

Hasilnya :




10. TOMBOL UNTUK VIDEO

Kode :
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" style="font-family: &quot;josefin sans&quot; , serif; font-size: 16px; margin: 0px; padding: 2px; width: auto;" type="button" value="Tampilkan" /></div>
<div class="alt2" style="background: white; border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<iframe allowfullscreen="" frameborder="0" height="150" src="//www.youtube.com/embed/f8D7ElBHar0?feature=player_detailpage" width="210"></iframe>
</div>
</div>
</div>

Hasilnya :


Baca Juga : Cara Gampang Cegah Copy Paste Pada Blog

 Itulah beberapa Kumpulan Tombol Show Dan Hide Responsive yang bisa anda coba, dan silahkan untuk mencobanya.

Artikel Terkait

Unknown

Selanjutnya
Sebelumnya