0

How can I adapt the following code so that one of the divs will be open when the page is first loaded but will close when other divs are opened?

As it is now, the code hides the open div when another is open but only if that div is closed when the page is loaded.

I found the code here: Hiding a div when another is shown So credit to whoever posted it.

<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>

This is how I've adapted it so far to make it so each subsequent div can be accessed from the open div, but none of my (inexpert) tinkering has been able to make the code work when the first div in open to begin with, nor have I been able to find the answer using a search engine.

<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"/>

  <div align="center"><a href="#" OnClick="MyFunction('myDiv1');">Contents</a></div>


    <div id="myDiv1" style="display:none">
       <a href="#" OnClick="MyFunction('myDiv2');">Page 1</a>
      <br/>
        <a href="#" OnClick="MyFunction('myDiv3');">Page 2</a>
    </div>
    <div id="myDiv2" style="display:none">
      <div align="right"><a href="#" OnClick="MyFunction('myDiv3');">Page 2 ►</a></div> 
      <br/>
     text page 1
    </div>
    <div id="myDiv3" style="display:none">
       <a href="#" OnClick="MyFunction('myDiv2');">◄ Page 1</a> 
        <br/>
      <br/>
      text page 2
    </div>
</body>
Community
  • 1
  • 1
user2856593
  • 97
  • 3
  • 11
  • 4
    Correct me if I'm wrong - you copy pasted another person's code and now ask for yet another person to adapt it to your needs, without putting any effort of your own? – ılǝ Oct 08 '13 at 00:11
  • possible duplicate of [How to make only one accordion slide open at a time](http://stackoverflow.com/questions/19026032/how-to-make-only-one-accordion-slide-open-at-a-time) – Claudio Santos Oct 08 '13 at 00:23
  • Wrong site, apparently. I'm sorry for venturing into the wrong part of the internet. I clearly should have read the guidelines more carefully and found the part that says you have to be more knowledgeable of html than I am to ask questions on this site. – user2856593 Oct 08 '13 at 01:27
  • @user2856593 no need for sarcasm. Feel free to research a bit on your own and come back with particular question/ problems. I think www.w3schools.com is a good reference for this purpose. Voting to close the question. – ılǝ Oct 08 '13 at 01:33
  • I've added something about what I tried with the code. If it's still not up to scratch then I suppose that's the end of it. I thought that the question would be helpful to other people who don't know how to do this particular thing I'm asking about. As for the sarcasm, there may have been a little, but it was also my honest impression of what you were implying about what (and whom) this site is and isn't for. – user2856593 Oct 08 '13 at 01:50

1 Answers1

1

You could just add a call to MyFunction to show one automatically.

So, after the divs, you can add

<script>
    MyFunction('myDiv1');
</script>

jsfiddle: http://jsfiddle.net/cyberdash/x8nQs/

Joshua Nelson
  • 581
  • 2
  • 10
  • Thanks. You're awesome. Worked like a charm. Sorry, everyone, if the question was too trivial. This is my first time here. – user2856593 Oct 08 '13 at 02:09