?
Solved

Javascript Hide <DIV>

Posted on 2007-03-20
2
Medium Priority
?
300 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website,  magazine or online news has one on their site, and even some e-commerce sites have one. Today you can use sliders with Joomla, WordPress or …
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.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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.
Suggested Courses

762 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