We help IT Professionals succeed at work.

a button content box?

derrida
derrida asked
on
Medium Priority
256 Views
Last Modified: 2010-04-25
hi
i hope i`m asking the question in the right place.
i want to create a content box which will be opened when the user clike on its "header" and closed when the user re-click on it.
so when he clicks the content box open and he can see the content and use it and when he want he can close it.


can it be done and how?


best regards

ron
Comment
Watch Question

Dushan De SilvaTechnology Architect

Commented:
What is language or softwaer you using?

BR Dushan

Author

Commented:
hi

dreamweaver


ron
Don't talk to me.
CERTIFIED EXPERT
Commented:
Hi derrida,

You can do this in Dreamweaver by creating Layers and using the built-in Show-Hide Layers behavior.  

Here's a very rough sample:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
      position:absolute;
      width:200px;
      height:115px;
      background-color:#66FFFF;
      layer-background-color:#66FFFF;
      border:1px none #000000;
      z-index:1;
      visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<p><a href="#" onClick="MM_showHideLayers('Layer1','','show')">This is a header</a></p>
<div id="Layer1">Hi I'm the layer </div>

<p>&nbsp;</p>
</body>
</html>

It's just a little javascript and CSS.

When you click on the header, the layer shows.  If you mess around with the behaviors and search for some tutorial, you can figure out how to make it close (either make a 2nd behavior to double click/close or have a link or graphic in the layer that is set to hide onClick.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
hi
i want to thank you for the reference . i had no idea that i need to do all this. i thought that i am asking a question and getting some help, and that`s it. i hope i`ll learn how to manage my questions effectively.


ron
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.