Toggle Button in goRatchet Framework

Question

Can anyone please show me the code for toggle button in ratchet framework. i mean if toggle button is enable {do something} else{do something else}. i didnt got it anywhere in web.

<div  id="myToggle" class="toggle active">
        <div class="toggle-handle"></div>
    </div>  
    <script type="text/javascript" charset="utf-8">
    document.querySelector('#myToggle').addEventListener('toggle', myFunction)
    function myFunction()
    {
        if(document.getElementById("myToggle").className == 'toggle active')
        {
        document.getElementById("demo").innerHTML="ON";
        }
        else
        {
        document.getElementById("demo").innerHTML="OFF";
        }

    };
    </script>

For others who face the problem.The above code worked for me.

Answer 1

The myFunction recieves the event object, which contains info about the toggle state. Try something like this:

function myFunction(e) {
    if(e.detail.isActive) {
        document.getElementById("demo").innerHTML="ON";
    } else {
        document.getElementById("demo").innerHTML="OFF";
    }
};