Web Wiz - Green Windows Web Hosting
Web Wiz Homepage Search Web Wiz

  New Posts New Posts RSS Feed - Quick question...
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

Quick question...
 Post Reply Post Reply Page  12>
Author
  Topic Search Topic Search  Topic Options Topic Options
javi712 View Drop Down
Senior Member
Senior Member


Joined: 22 May 2003
Location: United States
Status: Offline
Points: 488 		Post Options Post Options   Thanks (0) Thanks(0)   Quote javi712 Quote  Post ReplyReply Direct Link To This Post Topic: Quick question...
    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/. 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!
Back to Top
michael View Drop Down
Senior Member
Senior Member
Avatar

Joined: 08 April 2002
Location: United States
Status: Offline
Points: 4670 		Post Options Post Options   Thanks (0) Thanks(0)   Quote michael Quote  Post ReplyReply Direct Link To This Post 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.
Blog | MPG Tracker
Back to Top
javi712 View Drop Down
Senior Member
Senior Member


Joined: 22 May 2003
Location: United States
Status: Offline
Points: 488 		Post Options Post Options   Thanks (0) Thanks(0)   Quote javi712 Quote  Post ReplyReply Direct Link To This Post Posted: 30 November 2006 at 4:06pm
Great! I just needed a name to go by.

Thanks Michael!
Back to Top
Mikey View Drop Down
Senior Member
Senior Member

1979

Joined: 06 October 2003
Location: United Kingdom
Status: Offline
Points: 839 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Mikey Quote  Post ReplyReply Direct Link To This Post 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
Handyman man?
Back to Top
javi712 View Drop Down
Senior Member
Senior Member


Joined: 22 May 2003
Location: United States
Status: Offline
Points: 488 		Post Options Post Options   Thanks (0) Thanks(0)   Quote javi712 Quote  Post ReplyReply Direct Link To This Post 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.
Back to Top
Mikey View Drop Down
Senior Member
Senior Member

1979

Joined: 06 October 2003
Location: United Kingdom
Status: Offline
Points: 839 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Mikey Quote  Post ReplyReply Direct Link To This Post 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?
Back to Top
zMaestro View Drop Down
Senior Member
Senior Member


Joined: 11 May 2003
Location: Egypt
Status: Offline
Points: 1183 		Post Options Post Options   Thanks (0) Thanks(0)   Quote zMaestro Quote  Post ReplyReply Direct Link To This Post 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: www.dynamicdrive.com
 
Back to Top
javi712 View Drop Down
Senior Member
Senior Member


Joined: 22 May 2003
Location: United States
Status: Offline
Points: 488 		Post Options Post Options   Thanks (0) Thanks(0)   Quote javi712 Quote  Post ReplyReply Direct Link To This Post 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!
Back to Top
 Post Reply Post Reply Page  12>

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.08
Copyright ©2001-2026 Web Wiz Ltd.

Become a Fan on Facebook Follow us on X Connect with us on LinkedIn Web Wiz Blogs
About Web Wiz | Contact Web Wiz | Terms & Conditions | Cookies | Privacy Notice

Web Wiz is the trading name of Web Wiz Ltd. Company registration No. 05977755. Registered in England and Wales.
Registered office: Web Wiz Ltd, Unit 18, The Glenmore Centre, Fancy Road, Poole, Dorset, BH12 4FB, UK.

Prices exclude VAT at 20% unless otherwise stated. VAT No. GB988999105 - $, € prices shown as a guideline only.

Copyright ©2001-2026 Web Wiz Ltd. All rights reserved.