Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kesulitan Bikin Tombol Show Hide Komentar di Wordpress
SOLVED - Jawaban ada di komentar
Halo agan agan, saya mau tanya perihal bikin tombol Show Hide Komentar.
Ini saya maunya bikin tombol Show Hide seperti ini logikanya...
Ada tombol yang membungkus komentar, jadi setelah tombol tersebut diklik akan muncul komentar. Dan saya maunya tombol tersebut hilang saat komentar terbuka.
Ini script yg saya gunakan:
HTML
<button type="button" class="display-comments">Display Comments</button>
JS
<script type="text/javascript">
const displayEl = document.querySelector(".display-comments");
const commentsEl = document.querySelector(".comments-area");
displayEl.addEventListener("click", ()=>{
commentsEl.classList.toggle("visible");
});
</script>
CSS
.comments-area {
display: none;
}
.comments-area.visible {
display: block;
}
Adakah yang bisa bantu?
1 Jawaban:
<div>di kode html nya tambahin : </div><pre><div class="comments-area"> <!-- Isi Komentar --> ini bagian komentar!!! </div></pre><div><br>dan pada event "click" tambahin : </div><pre>displayEl.style.display="none";</pre><div><br>kode lengkap : </div><pre><!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <style type="text/css"> .comments-area { display: none; }
.comments-area.visible {
display: block;
}
&lt;/style&gt;
</head>
<body> <button type="button" class="display-comments">Display Comments</button> <div class="comments-area"> <!-- Isi Komentar --> ini bagian komentar!!! </div> <script type="text/javascript"> const displayEl = document.querySelector(".display-comments"); const commentsEl = document.querySelector(".comments-area");
displayEl.addEventListener("click", () =&gt; {
commentsEl.classList.toggle("visible");
displayEl.style.display="none";
});
&lt;/script&gt;
</body>
</html></pre><div><br>semoga terbantu😊</div>
Tanggapan
thankyou :))