Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Membuat toggle show/hide dengan jquery
Malam sobat, mau tanya dong kalau untuk membuat toggle dengan jquery otomatis tertutup atau hide saat saya klik toggle lain bagaimana yaa? mohon pencerahannya
0
4 Jawaban:
Jawaban Terpilih
Coba
$("#hide").click(function(){
$("#target").hide();
});
$("#show").click(function(){
$("#target").show();
});
1
walau sudah menemukan jawabannya tapi saya penasaran, barusan coba-coba, barangkali bisa jadi tambahn hehehe
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var self = this
$("p.toggle").each(function() {
if(this.id !== "paragraf-" + self.id) {
$("p#" + this.id).css('display','block');
}
});
$("p#paragraf-" + this.id).toggle();
});
});
</script>
</head>
<body>
<p id='paragraf-toggle-1' class="toggle">Ini toggle 1</p>
<p id='paragraf-toggle-2' class="toggle">Ini toggle 2</p>
<p id='paragraf-toggle-3' class="toggle">Ini toggle 3</p>
<button id='toggle-1'>Button 1</button>
<button id='toggle-2'>Button 2</button>
<button id='toggle-3'>Button 3</button>
</body>
</html>
1
