Forgot Password / Register
Site Statistics
Total Members: 520
Total Tutorials: 242
Newsest User: 8884244477
Todays Unique Hits: 197
0 Users 3 Guests Online

Show and Hide Content Simple

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...
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>]<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>


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

There shouldn't be any problems with it.
ilyas-shezad
Views:
1877
Rating:
Posted on Sunday 8th June 2008 at 09:12 AM
ilyas-shezad
ilyas-shezad
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 8th June 2008 at 09:09 AM
ilyas-shezad
ilyas-shezad
O sorry i did make an error 1 second im going to test it b4 i put up the working one.
Posted on Sunday 8th June 2008 at 09:08 AM
ilyas-shezad
ilyas-shezad
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 8th June 2008 at 07:54 AM
Dalez
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 6th June 2008 at 06:46 PM
ashwill
ashwill
Nice yes, but as SkillMaster has already said, it's more of a code snipper rather than a tutorial.
Posted on Friday 6th June 2008 at 06:46 AM
SkillMaster
SkillMaster
Not really a tutorial, but a code snippet. Some explanation would be good ty.