Cara Membuat Toggle Hide/Show dengan Javascript
Tak akan pernah dapat melihat wajah sendiri dengan bagus jikalau cerminnya kusam dan kotor. Pun sama, tak akan pernah dapat melihat dengan bagus seluruh kehidupan ini jikalau hati kita kusam dan kotor. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Toggle Hide/Show dengan Javascript.
Toggle Hide/Show yakni guna bagi merancang konten yang telah kita atur bagi kita hide atau kita sembunyikan. Lalu dapat kita tampilkan lagi atau yang disebut dengan show hanya dengan memakai 1 tombol tersebut. Oke berikut Cara Merancang Toggle Hide/Show dengan Javascript.
Seperti lazimnya, terlebih dahulu siapkan file index.html nya.
Kemudian isi di bagian <body> tag-tag HTML berikut.
<p>Click the Try it button to toggle between hiding and showing the DIV element:</p>
<button onclick=myFunction()>Try it</button>
<div id=myDIV>
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to none.</p>
Setelah itu, isi bagi CSS nya.
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}Dan yang terakhir, isi bagi bagian Javascript nya.
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
Bagaimana teman-teman? Lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai Cara Merancang Toggle Hide/Show dengan Javascript.
Semoga bermanfaat, terima kasih.
Sumber https://kursuswebsite.org
