Hiding Element Based on Toggle - Ratchet

I am new to using the ratchet framework so I am probably missing something basic. I want to use a toggle to hide a div when the toggle is off, and display it when the toggle is on. I know the toggle name changes to toggle active when it's active but the code I found from a few other posts does not seem to be working in my situation. Any help is appreciated.

Thanks

HTML

  <div class="content">
    <div id="map"></div>


    <ul class="table-view">
        <li class="table-view-cell">
            Stages
            <div id="toggle1" class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            Washrooms
            <div class="toggle ">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            Foods
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            Security
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            First Aid
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            ATM
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
    </ul>
    <div id="Stage1" class="StageMain">
        <a href="#"><img src="img/Untitled-1.png">
        </a>
    </div>
    <div class="StageSecond">
        <a href="#"><img src="img/Untitled-1.png">
        </a>
    </div>
    <div class="StageThird">
        <a href="#"><img src="img/Untitled-1.png">
        </a>
    </div>

</div>

Javascript

   if(document.getElementById("toggle1").className == 'toggle active')
    {
        $('#Stage1').show();
    }
    else
    {
        $('#Stage1').hide();
    }

Solution

you should use a handle to show/hide your element.

visit this link http://www.w3schools.com/jquery/jquery_hide_show.asp

check this code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script>
var status = 'show';
function change()
{
	if(status == 'show')
	{
		document.getElementById("toggle1").style.display = 'none';
		status = 'hide';
	}
	else
	{
		document.getElementById("toggle1").style.display = 'block';
		status = 'show';
	}
}
</script>
</head>

<body>
	<div class="content">
    <div id="map"></div>

    <ul class="table-view">
        <li class="table-view-cell" onclick="change()">
            Stages (click here)
            <div id="toggle1" class="toggle">this is test 
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell" >
            Washrooms
            <div class="toggle ">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            Foods
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            Security
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            First Aid
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
        <li class="table-view-cell">
            ATM
            <div class="toggle">
                <div class="toggle-handle"></div>
            </div>
        </li>
    </ul>
    <div id="Stage1" class="StageMain">
        <a href="#"><img src="img/Untitled-1.png">
        </a>
    </div>
    <div class="StageSecond">
        <a href="#"><img src="img/Untitled-1.png">
        </a>
    </div>
    <div class="StageThird">
        <a href="#"><img src="img/Untitled-1.png">
        </a>
    </div>

</div>
</body>
</html>