show then hide a div layer with button click

I need to know how to show and then hide a div layer using Microsoft web expression and dreamwaever.I have one layer/ div with a button I need to click that button and the layer on top on that layer appears this 2nd layer has a button to make 2nd layer invisible. I know in CSS THERE IS A DISPLAY WHICH ALLOWS YOU TO MAKE A LAYER VISIBALE AND HIDDEN. I JUST DON'T KNOW HOW TO CODE CSS.ATTCHED IS HTML FILE FOR YOU TO SEE AND PLAY WITH THE 2ND LAYER/DIV IS CURRENTLY PLACED ON TOP OF THE FIRST LAYER BUT IT IS SET TO HIDDEN. tHANKS ee.
Layerdiv.html
powerztomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
if you just want to hide it then you use the CSS visibility property:

visibility:visible  and visibility:hidden

That will leave it in the flow but invisible.  That may not be what you want because the layer underneath with not be clickable. So you need to take it right out of the flow.  You do that with the CSS display property:
display:none; to hide it and display:block to show it.

Cd&
0
Chris StanyonWebDevCommented:
As you've tagged and zoned this as jQuery, the easiest option is to use the toggle function:

$('#yourButtonID').click(function() {
    $('#yourDiv').toggle();
});

Open in new window

Make sure your button and div have suitable IDs (you'll need to replace yourButtonID and yourDiv in the above code.)

Here's a fiddle to play with - http://jsfiddle.net/ChrisStanyon/UCHDg/
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have a working sample based on what you provided http://jsbin.com/OMaPIwE/1/edit. I
Updated the html where I removed the form tag and added id's to your button and included jquery

However, for your own development and any body reading this...  Try and learn basic html and css if you are going to create web pages.  A good source outside of asking questions here is http://www.codecademy.com/ and there are others as well.  You should really spend several  hours on each of html and css.  Also start to get your feet wet with basic javascript and jquery.

Try and avoid using the built in functions of dreamweaver and web expression especially if you have an older version.  Web Expression is out of date and not being distributed anymore.  Coding and technology for the web is changing very quickly.  What we did even a couple of years ago, my not be valid today.   I use dreamweaver myself, so I am not totally knocking it, but just avoid some of the options that writes code for you as it is not always best practice and designed more to make it easy for you rather then the proper way.  As you learn basic html and css, you will see it is quicker to hand code.  

I do have your code working.  However, as it stands it is not valid.  You can check this by going to http://validator.w3.org/ and plugging in your url or pasting the code.  Invalid code is important because your code may not work on all browsers and devices.

Table layouts are good for html emails, but for regular design are not the best things.  If you would like to give us an idea of what you really want to do, we can help provide a different method.  

Good luck on your project.

<!doctype html>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>The Big ShowTHE Big ShowTest&nbsp;&nbsp; T</title>
<style type="text/css">
.newStyle1 {
	background-color: #FFFF00;
}
</style>
</head>

<body>
<div id="layer1" style="position: absolute; width: 425px; height: 189px; z-index: 1; left: 56px; top: 21px; background-color: #FFFF00">
  <table align="center" style="width: 100%; height: 25px">
    <tr>
      <td style="width: 350px">The Big Show
        <div id="layer2" style="position: absolute; width: 417px; height: 89px; z-index: 5; left: 5px; top: 3px;">
          <table style="width: 100%; height: 185px;">
            <tr>
              <td style="width: 332px; background-color: #000000; color: #FFFFFF; font-family: Georgia, 'Times New Roman', Times, serif; font-size: medium;"> THE Big Show</td>
              <td>
                  <button id="Abutton2" name="Abutton2" style="width: 64px">X Close </button>
               </td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF" style="width: 332px">Test</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td bgcolor="#800000" style="width: 332px">&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF" style="width: 332px">Test</td>
              <td>&nbsp;</td>
            </tr>
          </table>
        </div></td>
      <td>
          <button id="Abutton1" name="Abutton1">+ Show</button>
        </td>
    </tr>
  </table>
  <br />
  <table style="width: 100%">
    <tr>
      <td bgcolor="#808000">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td bgcolor="#800000">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>

Open in new window

The jquery that hides and shows based on the click.
 $('div#layer2').hide();
$('button#Abutton1').click(function(){
  $('div#layer2').show();
  
});
$('button#Abutton2').click(function(){
  $('div#layer2').hide();
  
});

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

powerztomAuthor Commented:
Guys Thanks I tried

$('#btnShow').click(function() {
    $('#layer2').toggle();
   
});

Open in new window


I don't know CSS Queries like how do you write visibility:visible  and visibility:hidden
to toggle on one button click.   I simplied the html doc I just want to have the one button now to toggle like the example in  http://jsfiddle.net/ChrisStanyon/UCHDg/ but web page doesn't toggle. Please help cause If I learn how to do this it will open the door for alot of cool things I can do with my projects assigned to me. Both EE Guys thanks If missing something I attached the html doc simplied it.
Layerdiv.html
0
Chris StanyonWebDevCommented:
Have a look at this and see if it makes sense - http://jsfiddle.net/ChrisStanyon/kkJGe/

Basically, you have your 2 layers. One is hidden by css when the page first loads (#layer2 { display:none; })

You then assign the toggle function to both layers (using a class). When the button is clicked it will toggle the hidden one to be visible and the visible one to be hidden.

Hope that makes sense.
0
powerztomAuthor Commented:
I'm not having the same luck or result you guys are having It Sucks
Thanks for all the advice I just tried it on http://jsbin.com/OMaPIwE/1/edit and it worked.
so I'm gonna emulate their code then award points to all three of ya.

<!doctype html>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>The Big ShowTHE Big ShowTest&nbsp;&nbsp; T</title>
<style type="text/css">
.newStyle1 {
	background-color: #FFFF00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//$('#layer2').hide();
$('#Abutton1').click(function(){
  $('#layer2').show();
  
});
$('#Abutton2').click(function(){
  $('#layer2').hide();
  
});
</script>
</head>

<body>
<div id="layer1" style="position: absolute; width: 425px; height: 189px; z-index: 1; left: 56px; top: 21px; background-color: #FFFF00">
  <table align="center" style="width: 100%; height: 25px">
    <tr>
      <td style="width: 350px">The Big Show
        <div id="layer2" style="position: absolute; width: 417px; height: 89px; z-index: 5; left: 5px; top: 3px; visibility: hidden;">
          <table style="width: 100%; height: 185px;">
            <tr>
              <td style="width: 332px; background-color: #000000; color: #FFFFFF; font-family: Georgia, 'Times New Roman', Times, serif; font-size: medium;"> THE Big Show</td>
              <td>
                  <button id="Abutton2" name="Abutton2" style="width: 64px">X Close </button>
               </td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF" style="width: 332px">Test</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td bgcolor="#800000" style="width: 332px">&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF" style="width: 332px">Test</td>
              <td>&nbsp;</td>
            </tr>
          </table>
        </div></td>
      <td>
          <button id="Abutton1" name="Abutton1">+ Show</button>
        </td>
    </tr>
  </table>
  <br />
  <table style="width: 100%">
    <tr>
      <td bgcolor="#808000">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td bgcolor="#800000">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>

Open in new window

0
powerztomAuthor Commented:
Is my Javascript missing something ? it's got to be why it's not working
Layerdiv2.html
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Wrap your jquery code inside of

$(function() {


});

Open in new window

0
Chris StanyonWebDevCommented:
Your scripts should always be wrapped in a document ready block

<script type="text/javascript">
$(document).ready(function() {
   $('#Abutton1').click(function(){
      $('#layer2').show();
   });
   
   $('#Abutton2').click(function(){
      $('#layer2').hide();
   });
});
</script>

Open in new window

but the reason it's not working is because the toggle function toggles the display property. You're using the visibility property. Change visibility:hidden to display:none on your #layer2 div and it'll work fine
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
powerztomAuthor Commented:
Thanks Chris This is going to open the door for me in my work projects. I'm going have stats in a div layer then button click and then stacked on top of that different player stats. I'm in the sports business. Anyway thanks I'm happy
0
Chris StanyonWebDevCommented:
You might also want to look at jQuery UI Tabs. Takes away all the pain and looks good too :)

http://jsfiddle.net/ChrisStanyon/V9VGG/
0
powerztomAuthor Commented:
Thanks Chris
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.