Memanipulasi CSS Menggunakan toggleClass() dalam Metode jQuery

Hello guys! Kembali lagi bersama Miniblog dari Inzaghi's Blog! Jika sebelumnya sudah membuat jQuery DOM Manipulation, kali ini kita akan membuat Manipulasi CSS dengan menggunakan jQuery Method toggleClass().

Sumber : Tutorialsteacher.com dan Tutorials point.com

Metode toggleClass() jQuery berguna untuk beralih antara menambah/menghapus kelas pada elemen-elemen yang ditentukan.

$('selector expression').toggleClass('css class name');

Tentukan sebuah selector untuk mendapatkan referensi dari elemen-elemen yang ingin Anda atur untuk mem-bertukar (toggle) kelas CSS, dan kemudian panggil metode toggleClass() dengan nama kelas CSS sebagai parameter string.

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
                        
            $('#btnToggleDivClass').click(function(){
                $('#myDiv').toggleClass('redDiv');

            });
                
        });
    </script>
    <style>
    .yellowDiv{
        background-color:green;
        margin: 10px 0 0 0;
        height:100px;
        width: 100px;
    }
    .redDiv{
        background-color:red;
        margin: 10px 0 0 0;
        height:100px;
        width: 100px;
    }
  </style>
</head>
<body>
    <h1>jQuery toggleClass() Method Demo</h1>
    <button id="btnToggleDivClass">Toggle div Class</button>
    
    <div id="myDiv" class="yellowDiv" >
    </div>
</body>
</html>

Hasil Output :

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Memanipulasi CSS Menggunakan toggleClass() dalam Metode jQuery