Solved

Javascript Hide <DIV>

Posted on 2007-03-20
2
278 Views
Last Modified: 2010-04-16
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
Comment
Question by:steverguy
  • 2
2 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 500 total points
ID: 18776125
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18866365
I'm glad that helped.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

If you get a (Blue Screen of Death), your system writes a small file called a minidump. Your first step is to make certain your computer is setup to record memory dumps. Right click My Computer, choose properties. Click on the advanced tab, an…
In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access. In this tutorial I will show …
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now