www.webdeveloper.com
Results 1 to 7 of 7

Thread: Show and Hide all elements by ID

  1. #1
    Join Date
    Feb 2014
    Posts
    4

    Show and Hide all elements by ID

    I'm writing a script which needs to hide all elements of a certain ID on page load, and display them upon clicking the link 'Toggle'. The following code hides all the questions, but only shows the first question when 'Toggle' is clicked even though they all have the same ID. I'm very new at javascript and greatly appreciate your help. Thanks.


    Code:
    <script type="text/javascript">
    function hideshow(which){
    if (!document.getElementById)
    return
    if (which.style.display=="block")
    which.style.display="none"
    else
    which.style.display="block"
    }
    </script>
    Code:
    <a href="javascript:hideshow(document.getElementById('adiv'))">Toggle</a>
     
    <div id="adiv" style="font:24px bold; display: none;">Question 1</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 2</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 3</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 4</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 5</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 6</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 7</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 8</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 9</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 10</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 11</div>
    <div id="adiv" style="font:24px bold; display: none;">Question 12</div>

  2. #2
    Join Date
    Feb 2014
    Posts
    2
    Id should be unique in page. Better use same class name for all divs. then get all elements by document.getElementsByClassName(className).


    <a href="javascript:hideshow(document.getElementById('adiv'))">Toggle</a>

    <div class="adiv" style="font:24px bold; display: none;">Question 1</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 2</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 3</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 4</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 5</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 6</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 7</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 8</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 9</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 10</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 11</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 12</div


    script

    var divs = document.getElementsByClassName("adiv");
    for(var i=0; i<divs.length;i++){
    hideshow(divs[i);
    }

  3. #3
    Join Date
    Feb 2014
    Posts
    4
    Okay. I understand about the unique IDs, but I tried the code with no success.

  4. #4
    Join Date
    Feb 2014
    Posts
    2
    <a href="javascript:toggleElements()">Toggle</a>

    <div class="adiv" style="font:24px bold; display: none;">Question 1</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 2</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 3</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 4</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 5</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 6</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 7</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 8</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 9</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 10</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 11</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 12</div


    script

    function toggleElements(){
    var divs = document.getElementsByClassName("adiv");
    for(var i=0; i<divs.length;i++){
    hideshow(divs[i);
    }

    function hideshow(which){
    if (which.style.display=="block")
    which.style.display="none"
    else
    which.style.display="block"
    }


    }

  5. #5
    Join Date
    Dec 2012
    Posts
    170
    This would probably be a better way to do it

    Code:
    <a href="#" id="toggle">Toggle</a>
    
    <div class="adiv" style="font:24px bold; display: none;">Question 1</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 2</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 3</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 4</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 5</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 6</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 7</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 8</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 9</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 10</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 11</div>
    <div class="adiv" style="font:24px bold; display: none;">Question 12</div>
    
    <script>
    var btn = document.getElementById('toggle'),
    divs = document.getElementsByClassName('adiv');
    
    btn.addEventListener('click',function(e) {
        for(var i = 0, l = divs.length; i < l; i++) {
            divs[i].style.display = (divs[i].style.display == "none" ? "block" : "none");
        }
        e.preventDefault();
    });
    </script>

  6. #6
    Join Date
    Oct 2013
    Posts
    609
    I'm no expert, but shouldn't this line:
    Code:
    hideshow(divs[i);
    be this:
    Code:
    hideshow(divs[i]);

  7. #7
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    This a working example in a Sukolu solver. It shows start, details, solver, and about with only one div showing at a time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles