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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show and Hide all elements with same 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
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,920
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    id's must be unique. It is not permissible to have multiple identical id's. You can assign identical classnames to different <div>s.

    He's an underwear model with a great six-pack ... who lets it all hang out. - Presenter, BBC 1

    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.

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [QUOTE=Philip M;1387633]id's must be unique. It is not permissible to have multiple identical id's. You can assign identical classnames to different <div>s.

    It seems that Javascript is not my only weakness (perhaps also CSS). Thanks. So that identifies my problem. Does anyone have any idea of a good fix?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,920
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by jaandrws View Post
    It seems that Javascript is not my only weakness (perhaps also CSS). Thanks. So that identifies my problem. Does anyone have any idea of a good fix?
    An easy way is to use Javascript and CSS:-

    CSS:-

    hide {display: auto;}
    body.js hide {display: none;}

    SCRIPT (place at end right in front of body tag, or in a load event):

    <script type="text/javascript">
    document.body.className+=" js";
    </script>

    Now, elements with a class of "hide" will not show up when Javascript is enabled.
    Last edited by Philip M; 02-23-2014 at 05:03 PM.

    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.


  •  

    Posting Permissions

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