show/hide button

View previous topic View next topic Go down

avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 28/3/2012, 3:36 pm

how do i make a button that will take a div and make it appear and dissapear(with the button staying in corner)
avatar
LGforum
Moderator
Forum Posts : 77
Member Since : 2011-11-12
View user profile

PostLGforum on 28/3/2012, 4:04 pm

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>
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 28/3/2012, 4:46 pm

This isnt for forumotion.this is for a regular site.
avatar
Niko
Member
Member
Forum Posts : 20
Member Since : 2012-03-24
View user profile http://www.fmcodes.com

PostNiko on 29/3/2012, 6:41 am

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

That code works on Forumotion Like a Star @ heaven
Sure...
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 29/3/2012, 9:43 am

i find that last of which you said(niko) quite useless.
avatar
Niko
Member
Member
Forum Posts : 20
Member Since : 2012-03-24
View user profile http://www.fmcodes.com

PostNiko on 29/3/2012, 10:02 am

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 Like a Star @ heaven Like a Star @ heaven
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 29/3/2012, 11:10 am

It did not work. all it did was hide my div and when i click "show/hide' nothign happened.
avatar
Niko
Member
Member
Forum Posts : 20
Member Since : 2012-03-24
View user profile http://www.fmcodes.com

PostNiko on 29/3/2012, 1:36 pm

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
avatar
LGforum
Moderator
Forum Posts : 77
Member Since : 2011-11-12
View user profile

PostLGforum on 5/4/2012, 7:31 am

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>
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 6/4/2012, 6:26 pm

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.
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum