Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> How To Hide And Show A Div On Clicking
midnitesun
post Dec 26 2006, 11:24 AM
Post #1


Premium Member
********

Group: Members
Posts: 181
Joined: 22-February 06
Member No.: 19,007
so here is a simple tutorial of a code i wrote today and thought it may prove useful to someone out here too
what it does is show a div when the page loads and then when user clicks on a link the div is hidden another div is shown ,you can do a lot based on this code
CODE
<body onload="hide('xx')">
<script language="JavaScript" type="text/javascript">
function hide(obj){
document.getElementById(obj).style.visibility="hidden";
}
function show(obj){
document.getElementById(obj).style.visibility="visible";
}
</script>

<a href="gg" class="main" onclick="hide('ss');show('xx');return false;">change div</a>
<div id="ss" align="center">
this is the div displayed when page loads</div>
<div id="xx" align="center">now this div is shown because you clicked on the link</div>

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Dec 26 2006, 12:01 PM
Post #2


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,561
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
Looks interesting but could use a demo link of some sorts just in case something could go wrong.

(list)

Go to the top of the page
 
+Quote Post
midnitesun
post Dec 26 2006, 12:25 PM
Post #3


Premium Member
********

Group: Members
Posts: 181
Joined: 22-February 06
Member No.: 19,007
yea thanks mike , made some changes and put a demo link too
CODE
<body onload="hide('xx')">
<script language="JavaScript" type="text/javascript">

function hide(obj){
document.getElementById(obj).style.visibility="hidden";
}
function show(obj){
document.getElementById(obj).style.visibility="visible";
}
</script>


<div id="ss" align="center">
<a href="gg" class="main" onclick="hide('ss');show('xx');return false;">change div</a>
<p>
this is the div displayed when page loads</div>

<div id="xx" align="center">
<a href="gg" class="main" onclick="hide('xx');show('ss');return false;">show previous div</a>
<p>
now this div is shown because you clicked on the link
</div>


demo

(list)

Go to the top of the page
 
+Quote Post
salamangkero
post Dec 26 2006, 04:21 PM
Post #4


Super Member
*********

Group: [HOSTED]
Posts: 492
Joined: 15-August 06
From: Philippines
Member No.: 28,387
QUOTE(midnitesun @ Dec 26 2006, 07:24 PM) *
...you can do a lot based on this code


I so agree. One of the more readily apparent uses of this is in organizing content on your page. For another demo, if it is not too much, click here. As you can see, the links are sorted by category. Using the script avoids the visual clutter typical of the merest link directories.

I'd like to add, if it is not too much, that there is more than one way to skin a cat, so to speak. It is not too complicated, though. It's a few letters shorter although it does nothing too spectacular.
CODE
function hide(obj){
document.getElementById(obj).style.display="none";
}
function show(obj){
document.getElementById(obj).style.display="block";
}

It is what I actually use.

Be reminded, though, that although you do not present all the content in these divs unless the user desires so, the browser will still download all the stuff in those divs whether the user actually views it or not. It goes to say that this approach is not desirable if you plan to pop long texts or humongous images in and out of visual existence. Unless, of course, you are a cold hearted 3@$+@rd who does not care if the page loads too slowly for us dialup users. Otherwise, it'd probably be better to use an actual hyperlink happy.gif

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Dec 26 2006, 07:37 PM
Post #5


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,561
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
Ah I thought that it looked familiar whats funny the site that does the same thing only he uses more code laugh.gif. Of course I think their is more to it in his coding though. Maybe this could help give your code another possible update in the future.

http://www.flooble.com/scripts/expand.php

JS
CODE

<!-- flooble Expandable Content header start -->
<script language="javascript">
// Expandable content script from flooble.com.
// For more information please visit:
//   http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end   -->


HTML
CODE

<!-- flooble Expandable Content box start -->
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td></td><td align="right">
[<a title="show/hide" id="exp1167161124_link" href="java script: void(0);" onclick="toggle(this, 'exp1167161124');"  style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table>
<div id="exp1167161124" style="padding: 3px;"></div>
</div><noscript><a href="http://www.flooble.com/scripts/expand.php">this expanable content box is made using a
free javascript from flooble</a> | Free <a href="http://www.flooble.com/scripts/animate.php">animated text javascript script</a>
</noscript>
<!-- flooble Expandable Content box end  -->


This is another version tat I know of.

http://icant.co.uk/sandbox/footercollapsetables/

I would think the next step would be in your coding would be to try and mimic the examples I showed you and improve on them.

(list)

Go to the top of the page
 
+Quote Post
matak
post Dec 26 2006, 08:01 PM
Post #6


Super Member
*********

Group: Members
Posts: 413
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
very nice piece of code i must say..

i was interested in some way of loading certain div from database or another file. when that would be possible and with this code you shown someone could make customizable menus for users on their site easily.

what would be the simplest way to load certain div from database? (sorry for OT post)

loading divs from database could be interesting beacouse users could maybe create their own menus and store them to database so that later they could easily access them when they login to site...

This post has been edited by matak: Dec 26 2006, 08:10 PM

(list)

Go to the top of the page
 
+Quote Post
delivi
post Dec 26 2006, 08:24 PM
Post #7


Trap Grand Marshal Member
***********

Group: [HOSTED]
Posts: 1,314
Joined: 11-January 06
From: Chennai, India
Member No.: 16,932
wow thats a great piece of code

(list)

Go to the top of the page
 
+Quote Post
Sharn
post Dec 27 2006, 03:34 AM
Post #8


Member [Level 2]
*****

Group: Members
Posts: 89
Joined: 26-August 06
Member No.: 28,938
Wow. Been wondering how to do this for a while now. Thanks a lot for the code, midnitesun!

(list)

Go to the top of the page
 
+Quote Post
QuickSilva