I have few div in my webpage. I want to display only selected div from list. How I achieve this.  

I was try it to make but I fail. My following line of code as following.

HTML Code

<ul class="side bar tabs">

    <li id = "tabs1" onclick = "showStuff('tabs-1')">City</li>

    <li id = "tabs2" onclick = "showStuff('tabs-2')">Country</li>

    <li id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li>  

</ul>

<div id="tabs-1" style = "display : none">

    <p>Proin elit m</p>

</div>

<div id="tabs-2" style = "display : none">

    <p>M massa ut d</p>

</div>

<div id="tabs-3" style = "display : none">

   <p> sodales.</p>

</div>

JavaScript Code

<script type="text/javascript">

function showStuff (id) 

{

    if (document.getElementById(id).style.display === "block")

    {

        document.getElementById(id).style.display = "none";

    }

    else

    {

        document.getElementById(id).style.display = "block";

    }       

}

</script>

Please help me as soon as possible.

Thanks in advance.