• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 303
  • Last Modified:

Javascript Hide <DIV>

I need some help with Javascript.  I want two buttons at the top of the page to close and open specific div tags in the page.  Here's the javascript i'm using:
     <script language="javascript">
          function EditSettings()
      {
      if(document.getElementById)
          {
            document.getElementById("ShowSettings").style.display ="block";
            document.getElementById("ShowEditPages").style.display ="none";
           }
      if(document.all)
         {
           document.all["ShowSettings"].style.display ="block";
           document.all["ShowEditPages"].style.display ="none";
          }
                      }
      function EditPages()
      {
        if(document.getElementById)
           {
             document.getElementById("ShowSettings").style.display ="block";
             document.getElementById("ShowEditPages").style.display ="none";
           }
        if(document.all)
          {
            document.all["ShowSettings"].style.display ="block";
            document.all["ShowEditPages"].style.display ="none";
          }
      }
</script>
The HTML Is basically this:
       <input type="button" value="Set Base Options" onClick="javascript:EditSettings();">
                     <input type="button" value="Edit Pages" onClick="javascript:EditPages();">
<div id="ShowSettings" style="DISPLAY: block">
   Setting Info Goes Here
</div>
<div id="ShowEditPages" style="DISPLAY: none">
   Edit Page info goes Here.
</div>

I'm not fluent in javascript by any stretch of the imagination, but I thought this was the way you accomlished this.  Its not!  Any help would be appreciated.

Thanks

0
steverguy
Asked:
steverguy
  • 2
1 Solution
 
b0lsc0ttCommented:
The problem was basically a mistake in the code.  Both functions did the same thing, the default.  I don't know if I made the right correction but I changed the EditPages function so it would show the edit pages div and hide the settings (default) div.

function EditSettings()
      {
      if(document.getElementById)
            {
              document.getElementById("ShowSettings").style.display ="block";
              document.getElementById("ShowEditPages").style.display ="none";
            }
      if(document.all)
         {
           document.all["ShowSettings"].style.display ="block";
           document.all["ShowEditPages"].style.display ="none";
          }
      }
function EditPages()
      {
        if(document.getElementById)
           {
             document.getElementById("ShowSettings").style.display ="none";
             document.getElementById("ShowEditPages").style.display ="block";
           }
        if(document.all)
          {
            document.all["ShowSettings"].style.display ="none";
            document.all["ShowEditPages"].style.display ="block";
          }
      }

That simple change will give you results.  You may just have to reverse them to get the ones you want. :)

I usually suggest you don't set the display value if you are just using the default.  For example in the script replace "block" with just "".

            document.all["ShowEditPages"].style.display ="";

In the div tag use the code below if you want the div to display by default.

<div id="ShowSettings">

Let me know how that works or if you have a question.

bol
0
 
b0lsc0ttCommented:
I'm glad that helped.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now