Solved

Javascript Hide <DIV>

Posted on 2007-03-20
2
269 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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction This tutorial will give you a fast look what you can do with WhizBase. I expect you already know how to work with HTML at least, and that you understand the basics of the internet and how the internet works. WhizBase is a server-s…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
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.

708 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

13 Experts available now in Live!

Get 1:1 Help Now