Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post

    Unhiding specific div when pressing button

    I'm trying to set up a group of buttons which will each unhide a certain div, while hiding the rest of the divs in a set. This is what I have, but it doesn't work:

    Code:
    <style>
    .hidden {display:none;}
    </style>
    <script type="text/javascript">
    function hideDivs()
      {
      for(i=1;i<=5;i++)
        {
        divName="div" + i;
        document.divName.style.display="hidden";
        }
      }
    
    function unhide(selectedDiv)
      {
      document.getElementById(selectedDiv).style.display='block';
      }
    </script>
    
    <button class="menuButton" onClick="hideDivs();unhide('div2');">test div 2</button>
    <button class="menuButton" onClick="hideDivs();unhide('div3');">test div 3</button>
    <button class="menuButton" onClick="hideDivs();unhide('div4');">test div 4</button>
    
    <div name="div1" class="hidden">DIV 1</div>
    <div name="div2" class="hidden">DIV 2</div>
    <div name="div3" class="hidden">DIV 3</div>
    <div name="div4" class="hidden">DIV 4</div>
    <div name="div5" class="hidden">DIV 5</div>
    Can someone give me an idea of what I'm doing wrong?

    Thanks in advance...
    Last edited by jkurrle; 08-02-2012 at 01:51 AM. Reason: Issue is Resolved

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You have assigned names to your divs, but not ids. display property is "none" not hidden. You are mixing Javascript and CSS which is often a problem. There is no need for two functions.

    Code:
    <script type="text/javascript">
    
    function hideDivs(selectedDiv)  {
    for (var i=1; i<=5; i++)    {
    divName="div" + i;
    document.getElementById(divName).style.display="none";  // hide all divs
    }
    document.getElementById(selectedDiv).style.display='block';  // show the selected div
    }
    </script>
    
    <button class="menuButton" onclick="hideDivs('div2')">test div 2</button>
    <button class="menuButton" onclick="hideDivs('div3')">test div 3</button>
    <button class="menuButton" onclick="hideDivs('div4');">test div 4</button>
    
    <div id="div1" style="display:none">DIV 1</div>
    <div id="div2" style="display:none">DIV 2</div>
    <div id="div3" style="display:none">DIV 3</div>
    <div id="div4" style="display:none">DIV 4</div>
    <div id="div5" style="display:none">DIV 5</div>

    "Knowledge is of no value unless you put it into practice.” - Anton Chekhov (Russian playwright and master of the modern short story, 1860-1904)

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jkurrle (08-02-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    42
    Thanks
    21
    Thanked 1 Time in 1 Post

    Just What the Doctor ordered

    That did the trick, thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •