General Discussion - Quick question...

Print Page | Close Window

Quick question...

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: General Discussion
Forum Description: General discussion and chat on any topic.
URL: https://forums.webwiz.net/forum_posts.asp?TID=22072
Printed Date: 29 March 2026 at 5:00pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Quick question...

Posted By: javi712
Subject: Quick question...
Date Posted: 30 November 2006 at 2:46pm

Hello all,

I ran into a website yesterday that had a pretty cool functionality that I would like to use. It has a link, and when you click on that link, the space below it expands and reveals the contents of what you clicked on. You can view what i'm talking about on this page: http://www.yourhead.com/ - http://www.yourhead.com/ . If you scroll down to the FAQ section, you will see it in action.

Would anyone happen to know how that was achieved? If it was javascript or something else. And would anyone happen to have a tutorial on that or happen to know where I can get the tutorial on it from.

Thanks in advance!

Replies:

Posted By: michael
Date Posted: 30 November 2006 at 3:05pm

It's called an Accordion which you can achieve using JavaScript and Panels or Layers. Don't have an example at hand but should not be too hard to find using google.

-------------
http://baumannphoto.com" rel="nofollow - Blog | http://mpgtracker.com" rel="nofollow - MPG Tracker

Posted By: javi712
Date Posted: 30 November 2006 at 4:06pm

Great! I just needed a name to go by.

Thanks Michael!

Posted By: Mikey
Date Posted: 30 November 2006 at 8:24pm

I've always used the DIV CSS 'visibility' property to achieve this.
Having a hidden div below the link that (using Javascript) has its visibility property reset to display it when the link is clicked

try this link for some info
http://www.w3schools.com/css/pr_class_visibility.asp - http://www.w3schools.com/css/pr_class_visibility.asp

-------------
Handyman man?

Posted By: javi712
Date Posted: 30 November 2006 at 10:29pm

Thanks Mikey!

Would you happen to have a working example of the visible/hidden property?

I've been working on a script i found by googeling accordion and it seems to be working how i want it to... but if you have another method of doing, i would like to explore that method also to see which one is better.

Posted By: Mikey
Date Posted: 30 November 2006 at 10:39pm

Paste this into a html document and give it a go.


<html>
<head>
</head>

<body>
<script language="Javascript">
function toggle( targetId ) {
   if ( document.getElementById ) {
    target = document.getElementById( targetId );
    if ( target.style.display == "none" ) {
     target.style.display = "";
    } else {
     target.style.display = "none";
    }
   }
}
</script>
<a href="javascript:toggle('div1')">
click to toggle
</a>
<div id="div1">
Hello Javi.
</div>
</body>
</html>

Not pretty cos no styling is applied Tongue

-------------
Handyman man?

Posted By: zMaestro
Date Posted: 01 December 2006 at 1:04am

i think now this is done using Ajax, if the loaded content is large.

you can find the script under the Ajax section at: http://www.dynamicdrive.com - www.dynamicdrive.com

Posted By: javi712
Date Posted: 01 December 2006 at 2:20am

Thanks zMaestro!

I don't know too much about ajax. Does ajax use only php? If that's the case, it wouldn't be of much help to me since all of my pages would be in asp.

From browsing some ajax examples on dynamic drive... it is pretty impressive however!

Posted By: zMaestro
Date Posted: 01 December 2006 at 3:02am

No. Ajax is independent of any programing language, can be used with asp, php or even with html

Posted By: MadDog
Date Posted: 01 December 2006 at 3:16am

AJAX is not a language, its simple "term" of something that communicates to a server using client side code. You can use any server side language you want (asp, php, asp.net, etc).

-------------
http://www.iportalx.net" rel="nofollow">

Posted By: javi712
Date Posted: 01 December 2006 at 3:26am

Even all the better then!

Thanks guys!