Thread: hide show <div>

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    14
    Rep Power
    0

    hide show <div>


    How do I hide or show a specific dive within a js function?
    In the example below, I would like the js function to detect the button pressed (page #) and show that div but hide the others. I have abbreviated the code and do not need an "elseif" for other pages; if I con get one button to work, I can figure out the rest. Thx

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function showPage(btId) {
    
    if (btId == 'pg01') {
        // show div id "page_01"
    		// hide div id "page_02"
    		// hide div id "page_03"
    		// hide div id "page_04"
    }
    
    // elseif for other pages
    
    </script>
    </head>
    <body>
    
    <button onclick="showPage('pg01')">pg 1</button>
    <button onclick="showPage('pg02')">pg 2</button>
    <button onclick="showPage('pg03')">pg 3</button>
    <button onclick="showPage('pg04')">pg 4</button>
    
    <div id="page_01">This is page-01 content.</div>
    <div id="page_02">This is page-02 content.</div>
    <div id="page_03">This is page-03 content.</div>
    <div id="page_04">This is page-04 content.</div>
    
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    14
    Rep Power
    0
    Where is the "edit" button so I can correct mistakes to this question !!!
  4. #3
  5. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    It would have been a link thing in the bar at the bottom of the post, but it's only available for a short while after posting.

    You can use document.getElementById to get a particular IDed element on the page. Then use .style.display to change its CSS to show and hide the element - you'll have to figure out a way to decide which one to use since there is no way to toggle it.
    Code:
    document.getElementById("id").style.display = "none to hide, block to show";
    Since you need the ID, pass that value to the function instead of "pg01".

    Comments on this post

    • jwzumwalt agrees
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    14
    Rep Power
    0
    Since you need the ID, pass that value to the function instead of "pg01".
    That is the reason for the question. I have multiple div to manipulate and so I can not pass all the 'id'. How do I manipulate a div without passing the ID?
  8. #5
  9. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,190
    Rep Power
    2012
    You could hide all first, by hardcoding the id for each div.
    After that, you display the div needed.

    As requinx said, instead of for example passing 'pq01', you should pass on 'page_01'. Then you can use that value directly, without any button/if validation.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    14
    Rep Power
    0
    @requinix - Ok, thanks for the help.
    Since I didn't know what I was doing in the first place your answer was incomplete and took me a bit of trial and error.
    I am very grateful for your help, but I suggest providing a working example in the future (what was obvious to you , was not for me!)
    - Thanks once again to both of you for taking the time
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    14
    Rep Power
    0
    Thanks, that is what I did, I used both requinix and your suggestion. For some reason [document.getElementById("id").style.display = "none to hide, block to show";] didn't work the first time around - I tried "hide" and "show" - I ended up needing "none" and "block"; I don't know what the difference is...
  14. #8
  15. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    "none to hide, block to show" was supposed to be for you to read. Then you think, "okay, if I want to hide the element then I use 'none', and if I want to show the element then I use 'block'".
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    14
    Rep Power
    0
    Working code!!

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function showPage01(page) {
      document.getElementById("page01").style.display = "none";
      document.getElementById("page02").style.display = "none";
      document.getElementById("page03").style.display = "none";
      document.getElementById("page04").style.display = "none";
      document.getElementById(page).style.display = "block";
    }
    </script>
    </head>
    <body>
    
    <button onclick="showPage01('page01')">pg 1</button>
    <button onclick="showPage01('page02')">pg 2</button>
    <button onclick="showPage01('page03')">pg 3</button>
    <button onclick="showPage01('page04')">pg 4</button>
    
    <div id="page01">This is page-01 content.</div>
    <div id="page02">This is page-02 content.</div>
    <div id="page03">This is page-03 content.</div>
    <div id="page04">This is page-04 content.</div>
    
    </body>
    </html>
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    14
    Rep Power
    0
    FYI - I am using the latest Firefox and the edit button never shows
  20. #11
  21. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,190
    Rep Power
    2012
    Originally Posted by jwzumwalt
    ... the edit button never shows
    You might need more posts before it is enabled. Can't remember how many is required.
  22. #12
  23. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    If it is more posts then it's probably 15. Or it could be a matter of days.

    But don't worry about it. Making a second post is fine too. Better, even, because if someone reads your thread after the first post but before the second, they'd be able to see the thread update with the second post but wouldn't know about an edit.
  24. #13
  25. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    360
    Rep Power
    133
    Hi there jwzumwalt,

    at the risk of being labeled a party pooper, I would like to point
    out that your project could be done without JavaScript.

    Here is an example...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>CSS "target" Test</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #fcfcfc;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    
    #container {
        max-width: 50em;
        padding: 2em;
        margin: auto;
        border: 0.062em solid #999;
        background-color: #fff;
        text-align: right;
        box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
     }
    
    h1 {
        text-align: center;
     }
    
    h2, p {
        text-align: left;
     }
    
    #nav {
        padding: 0;
        margin: 2em 0;
        list-style: none;
        text-align: center;
     }
    
    #nav li {
        display: inline;
        margin: 0 1em;
     }
    
    #nav a {
        color: #000;
     }
    
    #link1, #link2, 
    #link3, #link4 {
        display: none;
        padding: 2em;
        border: 0.062em solid #999;
     }
    
    #link1:target, #link2:target, 
    #link3:target, #link4:target {
        display: block;
        animation: highlight 3s forwards;
     }
    
    @keyframes highlight {
    from {
          background-color: rgba( 128, 128, 128, 0.4 );
      }
    to   {
          background-color: rgba( 255, 255, 255, 0.0 );
      }
     }
    </style>
    
    </head>
    <body> 
     <h1>Target Test</h1>
      <div id="container">
       <ul id="nav">
        <li><a href="#link1">one</a></li>
        <li><a href="#link2">two</a></li>
        <li><a href="#link3">three</a></li>
        <li><a href="#link4">four</a></li>
       </ul>
       <div id="link1">
        <h2>Content One</h2>
         <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
          bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
          posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
          Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
          sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
          nunc. Curabitur ornare tempor turpis.
        </p>
        <a href="#container">close</a>
       </div>
       <div id="link2">
        <h2>Content Two</h2>
         <p>
          Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
          purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
          Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
          nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
          penatibus et magnis dis linkturient montes, nascetur ridiculus mus. 
        </p>
        <a href="#container">close</a>
       </div>
       <div id="link3">
        <h2>Content Three</h2>
         <p>
          Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non 
          vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. 
          Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. 
          Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
          augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam. 
        </p>
        <a href="#container">close</a>
       </div>
       <div id="link4">
        <h2>Content Four</h2>
         <p>
          In sapien massa, feugiat ut magna eu, hendrerit porttitor justo. In vitae massa ipsum. 
          Aliquam feugiat tortor sed diam facilisis, et molestie dolor blandit. Pellentesque non lectus 
          odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. Duis congue dignissim ante ut 
          consequat. Sed nec sagittis neque, quis vehicula urna. Fusce laoreet interdum ligula vel finibus.
         </p>
        <a href="#container">close</a>
       </div>
      </div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo