show/hide button

how do i make a button that will take a div and make it appear and dissapear(with the button staying in corner)

Thats javascript, not CSS.

There is actually a function in the forumotion system script for toggling elements like that.
The function is 'showhide()' and takes one parameter, which should be the element to toggle.

Example:

Code:


<div id="togggle-div" style="display:none"></div>

<div onclick="showhide(document.getElementById('toggle-div'))">Click</div>


This isnt for forumotion.this is for a regular site.

grimofdoom wrote:This isnt for forumotion.this is for a regular site.

That code works on Forumotion
Sure...

i find that last of which you said(niko) quite useless.

grimofdoom wrote:i find that last of which you said(niko) quite useless.

Sorry, If it doesn't work try this one:

Code:

<a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Show/Hide</a>

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

Here you are a demo of this: http://codes.forumotion.pro/h7-hide-show

Bye bye

It did not work. all it did was hide my div and when i click "show/hide' nothign happened.

grimofdoom wrote:It did not work. all it did was hide my div and when i click "show/hide' nothign happened.

Have you seen it here?
http://codes.forumotion.pro/h7-hide-show

Here is a re-usable showhide function for you.

Code:


function showhide(elem,disp) {
  if(typeof elem == 'string') elem = document.getElementById(elem);
  if(elem.style.display == 'none') {
    elem.style.display == disp ? disp : 'block';
  }
  else {
    elem.style.display == 'none'
  }
}


It can be used on any elements over and over again. It also has some nice options. If you send a string in as the first parameter, it assumes it as an ID, and will toggle the element with that ID, alternatively you can send an Element Node into it and it will toggle that element. You can also specify the display if you wish, if you don't it will be set as 'block'.

Use it like this:

Code:


<div id="div_to_toggle">
this can be toggle
</div>
<div onclick="showhide('div_to_toggle');">Click to toggle above</div>


Thanks,i hope it works(on ie5 in las vegas computer lounge,html/java doesnt show well because their brocken ei5 browsers),ill try it when i get home.