Topic: How Can I Hide a DIV until show is clicked (Read 554 times)

Cloud · « **on:** October 08, 2008, 06:20:05 PM »

Ok so Ive seen something on various site's where, well here it is, Example:

[What is cooking?]

They would click that and the [what is cooking?] would transform into
[Cooking is where you cook stuff] (HIDE)
and if they clicked hide it would transform back into [what is cooking?]

Anybody know how to do this? I don't want it to change page I just want it to change that text. When its clicked

i-CONICA · « **Reply #1 on:** October 08, 2008, 06:34:08 PM »

That's done with Javascript, One of the many millions of little cool things JavaScript can be used for.

Paste this into your html page right underneath the body tag of your document.

Code: [Select]

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

You can then call the above Java Script into action by passing the div ID to that code.
So the div id for the below code is cloud. It can be anything you like, As long as you change the onclick event to toggle visibility of the ID cloud.

For example paste this into where ever you'd like the hide/show text to be. Placing the content you'd like to show or hide between the div tags.

Code: [Select]

<a href="#" onclick="toggle_visibility('cloud');">Toggle Visibility</a>
<div id="cloud">This is cooking with javascript!</div>

It'll have a similar effect to this
[hide]This is similar to what the above code will do, except this is only shown to members.[/hide]

Any Questions?

Cloud · « **Reply #2 on:** October 08, 2008, 07:07:33 PM »

(!) problem: It shows when somebody enters the page, I want it to be hidden.

i-CONICA · « **Reply #3 on:** October 08, 2008, 07:53:37 PM »

Ok, More complex but try this.

Place this in the <head> of your page, so before the </head> tag.

Code: [Select]

<script type="text/javascript">
<!--
function setDivDisplay(value) {
   if(document.getElementById) {
      var nav1 = document.getElementById('showhideitem').style;
      nav1.display = value;
      return true;
   }
   return false;
}
function hide() {
   setDivDisplay("none");
}
window.onload = hide;
// -->
</script>

Then place this where you'd like it to be.
It can be anywhere in your <body>.

Code: [Select]

<a href="#" onclick="setDivDisplay('block');return false;">show</a>
<div id="showhideitem"><a href="#" onclick="setDivDisplay('none');return false;">hide</a><br />
Now this is cooking with javascript</div>

How's that?

Cloud · « **Reply #4 on:** October 08, 2008, 09:51:53 PM »

Works perfect! Thanks. But when you click show. Hide appears but show is still there. How can I remove show? while Hide is there?

i-CONICA · « **Reply #5 on:** October 08, 2008, 10:55:03 PM »

Not easily. That'll need a whole lot more code to do that, Unless I can come up with something quite simple, if not, it would be a block of code the length of your arm..

I'll ponder on it, see what i can do..

Cloud · « **Reply #6 on:** October 08, 2008, 11:27:21 PM »

wow...that much!? Your example at the top is basically what I wanted.

i-CONICA · « **Reply #7 on:** October 08, 2008, 11:29:49 PM »

I'll ponder on it...

Cloud · « **Reply #8 on:** October 09, 2008, 08:34:10 PM »

gotcha

Author Topic: How Can I Hide a DIV until show is clicked (Read 554 times)

Cloud

How Can I Hide a DIV until show is clicked

i-CONICA

Re: How Can I Hide a DIV until show is clicked

Cloud

Re: How Can I Hide a DIV until show is clicked

i-CONICA

Re: How Can I Hide a DIV until show is clicked

Cloud

Re: How Can I Hide a DIV until show is clicked

i-CONICA

Re: How Can I Hide a DIV until show is clicked

Cloud

Re: How Can I Hide a DIV until show is clicked

i-CONICA

Re: How Can I Hide a DIV until show is clicked

Cloud

Re: How Can I Hide a DIV until show is clicked

Quick Reply