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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    477
    Thanks
    7
    Thanked 3 Times in 3 Posts

    non JQUERY method of having more than one dropdown section on a page.

    Wanting to have more than one dropdown section on my page, but can not seem to find any code that gives the results I am after.

    I used the following code...
    Code:
        <!DOCTYPE html>
        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        /*this is the style for formation the other div */
        .format {/*this class is for the div that contents the banner for clicking*/
        width: 200px;
        height: 20px;
        background-color: black;
        text-align: center;
        color: white;
        cursor: pointer;
        }
        .top_div {/*this class is for the div that contents all the question */
        width:200px;
        margin: 20px;
        }
        /*this style is only used when you want the default to be hidden
        comment it out you want to default to be display*/
        .con{
        height: 0px;
        overflow: hidden;
        }
        </style>
        <script>
        //this is the function that hid and show the questions
        openCon = function () {
        if (document.getElementById("con_div").style.overflow != "hidden") {
        document.getElementById("con_div").style.overflow = "hidden";
        document.getElementById("con_div").style.height = "0px";
        }
        else {
        document.getElementById("con_div").style.overflow = "visible";
        document.getElementById("con_div").style.height = "auto";
        }
        }
        </script>
        </head>
        <body>
        <div id ="head" class ="format" onclick ="openCon(); " ><!--div containing the clicking part-->
        click to show hidden content
        </div><!-- End of div containing the clicking part-->
    
        <div id ="con_div" class="con"><!--div containing content to be hidden-->
        all the text that you want it to show when the icon is clicked
        </div><!-- End of div containing content to be hidden-->
    
        </body>
        </html>
    but this only works for one dropdown per page.

    Can anyone suggest a better way around having more than one dropdown section on my page.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,566 Times in 4,530 Posts
    You don't need all that style gobbledy gook. Keep it simple.
    Code:
    <html>
    <head>
    <style type="text/css">
    .head {
        cursor: pointer;
        border: solid red 3px;
    }
    .content {
        display: none;
        border: solid blue 3px;
        background-color: lightblue;
    }
    </style>
    </head>
    <body>
    <div id="H1" class="head">Click to show content 1</div>
    <div id="B1" class="content">This is content 1</div>
    
    <div id="H2" class="head">Click to show content 2</div>
    <div id="B2" class="content">This is second content</div>
    
    <div id="H3" class="head">Click to show content 3</div>
    <div id="B3" class="content">three three three three</div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var divs = document.getElementsByTagName("div");
          for ( var d = 0; d < divs.length; ++d )
          {
              var div = divs[d];
              if ( div.className == "head" )
              {
                  div.onclick = 
                      function() 
                      {
                          var num = this.id.substring(1);
                          var target = document.getElementById("B"+num);
                          target.style.display = 
                              target.style.display == "block" ? "none" : "block";
                      }
              }
         }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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