andriajah Sun May 2020 1 year ago

Contoh Jquery Toggle Hide Show div on Click Event

Dalam contoh ini, saya akan memberi Anda contoh sederhana show dan hide div pada click event tombol di jquery. kita dapat beralih show hide div pada event click. kita bisa melakukannya jquery toggle element pada contoh click.

Saya akan memberikan dua contoh yang akan melakukan hal yang sama dengan hide dan show div atau elemen berdasarkan class atau id pada event click.

Pada contoh pertama kita akan menggunakan jquery toggle() untuk hide dan show div. Dalam contoh kedua kita akan melakukannya secara manual menyembunyikan dan menampilkan div menggunakan teks. jadi mari kita lihat kedua contohnya.

Contoh 1

<!DOCTYPE html>
<html>
<head>
    <title>Jquery Toggle hide show div on click event example - Medikre.com</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        .display-none{
            display: none;
        }
    </style>
</head>
<body>
   
<button>Show</button>
<div id="example" class="display-none">
    Example of Medikre.com
</div>
   
<script type="text/javascript">
   
$("button").click(function(){
    $("#example").toggleClass('display-none');
});
    
</script>
   
</body>
</html>

Contoh 2

<!DOCTYPE html>
<html>
<head>
    <title>Jquery Toggle hide show div on click event example - Medikre.com</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  
<button>Show</button>
<div id="example" style="display: none;">
    Example of Medikre.com
</div>
   
<script type="text/javascript">
   
$("button").click(function(){
    if ($(this).text() == "Show") {
        $("#example").css('display', 'block');
        $(this).text('Hide');
    }else{
        $("#example").css('display', 'none');
        $(this).text('Show');
    }
});
   
</script>
   
</body>
</html>

Saya harap ini dapat membantu Anda ...

jquery