Toggle function not working when called

Question

The idea is to make two div appear or disappear based on the click. The CSS display style is set to none. Any help is appreciated.

   <div id="mainOval">
        <form id="btns">
            <input type="button" value="Timer" id="timerBtn" onclick="displayCont('Timer')"/>
            <input type="button" value="Countdown" id="ctDownBtn" onclick="displayCont('Countdown')"/>
        </form> 
</div>
<div id="Timer">
</div>
<div id="Countdown"> 
</div> 



<script type="text/javascript">
    function displayCont(inp)
        {
            var ele = document.getElementById(inp);
            var shown = ele.style.display;
            if (shown == 'none') 
                {
                    ele.style.display = 'block';
                }
            else if (shown == 'block')
                {
                    ele.style.display = 'none';
                }
        }
</script>

Answer 1

The correct code is:

if (shown == 'none') {
    ele.style.display = 'block';
}
else if (shown == 'block'){
    ele.style.display = 'none';
}

You have ot set the style of the element, not just assign a Javascript variable. And equality is == , not = = .