Question

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>


#nav li { width: 100px; height: 20px; margin: 2px; background: green; cursor: pointer; }
#filtration {
    display: none;
    width: 100px; height: 100px;
    background: #000;
}
#solid {
    display: none;
    width: 100px; height: 100px;
    background: #c0c0c0;
}    
#chemistry {
    display: none;
    width: 100px; height: 100px;
    background: red;
}


<ul id="nav">
    <li onclick="showdiv('filtration');">Filtration</li>
    <li onclick="showdiv('solid');">Solidification</li>
    <li onclick="showdiv('chemistry');">Chemistry</li>
</ul>

<div id="filtration">&nbsp;</div>
<div id="solid">&nbsp;</div>
<div id="chemistry">&nbsp;</div>​

Setting up a nav bar to show/hide content, the above code works fine, but the issue is I want one div to show content when you come to the page initially. The code above only works if ALL divs are hidden at first.

You can set one div to display:block, but then if you click another nav link other than the shown one nothing happens. You have to click the link for the corresponding div that is set to display:block first, then you can proceed to clicking the other links–useless.

How can I modify this so the first content div (#filtration) is initially set to display:block, then a user can proceed to click any link in the UL and have that content shown?

http://jsfiddle.net/2MpmK/3/

Thanks!

Answer 1

You should hide the other divs before showing the selected one:

function showdiv(id) {
    var divs = document.getElementsByTagName('div'),
        div  = document.getElementById(id);
    for (var i=0; i<divs.length; i++) {
        divs[i].style.display = 'none';
    }
    div.style.display = 'block';
}
​

FIDDLE

Or with jQuery and without those onclick functions you can do:

<ul id="nav">
    <li data-id="filtration">Filtration</li>
    <li data-id="solid">Solidification</li>
    <li data-id="chemistry">Chemistry</li>
</ul>

—

$(function() {
    $('#nav li').on('click', function() {
        $('#'+$(this).data('id')).show().siblings('div').hide();
    });
});
​

FIDDLE