Show and Hide Content Simple

Name: Show and Hide Content Simple
Rating: 5 (1 reviews)
Author: ilyas-shezad

Okay this is a tutorial on how to hide or show content on your website. Making your website much more interactive.

If any one wants to request an demo example of the script then please post a comment.

Okay heres the script...

JavaScript Code

<script language="javascript" type="text/javascript">
function toggle(item) {
	obj = document.getElementById(item);
	visible = (obj.style.display != "none");
	if(visible){
		obj.style.display = "none";
	} else {
		obj.style.display = "block";
	}
}
</script>
 
[<a onclick="toggle('blob');">show/hide</a>]
<div id="blob">
Huge amounts of text and images and php code here if you like. Tables, marquees all can be hidden when someone clicks show/hide.
 
Also you may need to adjust the show/hide link so it looks more like a link.
 
Thanks.
</div>

Okay so thats simply all of it.
Try it out now, its pretty cool.
Thanks,

There shouldn't be any problems with it.

Author:

ilyas-shezad

Views:

2,152

Rating:

Posted on Sunday 8^th June 2008 at 09:12 AM

ilyas-shezad
ilyas-shezad's Avatar

Working code:

Code

        <script language="javascript" type="text/javascript">

function toggle(item, toggler) {

obj = document.getElementById(item);

toggleitem = document.getElementById(toggler);

visible = (obj.style.display != "none");

if(visible){

obj.style.display = "none";

toggleitem.innerHTML = "Show"; 

} else {

obj.style.display = "block";

toggleitem.innerHTML = "Hide";

}

}

</script>

[<a onclick="toggle('blob', 'toggler1');" id="toggler1">Hide</a>]<br />

<div id="blob">

Huge amounts of text and images and php code here if you like. Tables, marquees all can be hidden when someone clicks show/hide.

Also you may need to adjust the show/hide link so it looks more like a link.

Thanks.

</div>

Posted on Sunday 8^th June 2008 at 09:09 AM

ilyas-shezad
ilyas-shezad's Avatar

O sorry i did make an error 1 second im going to test it b4 i put up the working one.

Posted on Sunday 8^th June 2008 at 09:08 AM

ilyas-shezad
ilyas-shezad's Avatar

Sure i guess so...
Just wrote the code out for you below...

Code

        <script language="javascript" type="text/javascript">

function toggle(item, toggler) {

obj = document.getElementById(item);

toggleitem = document.getElementById(toggler);

visible = (obj.style.display != "none");

if(visible){

obj.style.display = "none";

toggler.innerHTML = "Show"; 

} else {

obj.style.display = "block";

toggler.innerHTML = "Hide";

}

}

</script>

[<a onclick="toggle('blob', 'toggler1');" name="toggler1>show/hide</a>]<br />

<div id="blob">

Huge amounts of text and images and php code here if you like. Tables, marquees all can be hidden when someone clicks show/hide.

Also you may need to adjust the show/hide link so it looks more like a link.

Thanks.

</div>

You can change as you like.
I havnt tested this code so report any errors please.

Posted on Sunday 8^th June 2008 at 07:54 AM

Dalez

Cool, i'm using it now, but is there a way, that when the div is minimized, that a "+" comes up, and when its maximized a "-" comes up?

Thanks!

Posted on Friday 6^th June 2008 at 06:46 PM

ashwill

Nice yes, but as SkillMaster has already said, it's more of a code snipper rather than a tutorial.

Posted on Friday 6^th June 2008 at 06:46 AM

SkillMaster
SkillMaster's Avatar

Not really a tutorial, but a code snippet. Some explanation would be good ty.