Virus Corona (Covid-19)

Dapatkan Informasi terbaru

Contoh Jquery Toggle Hide Show div on Click Event

Jackma 17 May 2020 11,990

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 ItSolutionStuff.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 ItSolutionStuff.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 ...

Tags

jquery

Related Stories


Latest Stories


Close Ads X