Home/ Questions/Q 7367969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T03:36:17+00:00

So, I have a nav element with an unorder list that I use as

  • 0

So, I have a nav element with an unorder list that I use as tabs. There are three, you click one and it shows a div in the website. However, I want it so that if you click another, it will hide the one currently being shown, and then show the one you clicked. But I can’t seem to get it right. Here is the function I have:

function display(action, id)
 {
 if (action == 'show')
 {
 document.getElementById("page"+id).style.display = "block";
 document.getElementById("link"+id).href= "javascript:display('hide', "+id+")";
 }

if (action == 'hide')
 {
 document.getElementById("page"+id).style.display = "none";
 document.getElementById("link"+id).href= "javascript:display('show', "+id+")";
 }
 }

</script>

I tried to do something like

document.getElementById(“page”+id+1).style.display = “none”;

I thought that it would change the display style to none of the div with an id one more than the current, but instead it does nothing. What would I add to this to have it hide all currently open tabs?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    also you can store the DIV name in a Hidden Input

    http://jsfiddle.net/we2AJ/

    <body>
    <script language="javascript">
        function MyFunction(divName){

        //hidden val
        var hiddenVal = document.getElementById("tempDivName"); 

        //hide old
        if(hiddenVal.Value != undefined){
            var oldDiv = document.getElementById(hiddenVal.Value); 
            oldDiv.style.display = 'none'; 
        }

        //show div
            var tempDiv = document.getElementById(divName); 
            tempDiv.style.display = 'block';              

        //save div ID
            hiddenVal.Value = document.getElementById(divName).getAttribute("id");

        }
    </script>
    <input id="tempDivName" type="hidden" />
    <ul>
        <li><a href="#" OnClick="MyFunction('myDiv1');">Show myDiv1</a></li>
        <li><a href="#" OnClick="MyFunction('myDiv2');">Show myDiv2</a></li>
        <li><a href="#" OnClick="MyFunction('myDiv3');">Show myDiv3</a></li>
    </ul>
    <br/>
    <div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
        myDiv1
    </div>
    <div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
        myDiv2
    </div>
    <div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
        myDiv3
    </div>
</body>
    • 0