Web Hosting Talk







View Full Version : jquery question


superdooper
02-06-2009, 01:45 PM
Hi all,
I am trying to create a Twitter-esque navigation (https://twitter.com/about)
I have the following code:
<script language="javascript">
$(document).ready(function() {
$('[class^=toggle-item]').hide();
$('[class^=link]').click(function() {
var $this = $(this);
var x = $this.attr("className");
$('.toggle-item-' + x).slideDown('normal')
.siblings('div:visible').slideUp('normal');
return false;
});
});
</script>
Which hides all divs with toggle-item-link(NUMHERE) in the class.
It shows/hides all the Divs perfectly. Click a LINK1 it opens link1 and closes all others, click link3 it opens link3 and closes all the others etc etc.
I was wondering if anyone could help me modify it so it displays toggle-item-link1 by default (ie on page load) and then when another link is clicked it closes link1 for the required link?
TIA
James

superdooper
02-07-2009, 07:04 AM
Anyone? :)

Adam-AEC
02-07-2009, 11:03 AM
Hard to see without the HTML but I added a line that would slide down the first item on page load. That might work for you?
<script language="javascript">
$(document).ready(function() {
$('[class^=toggle-item]').hide();
$('[class^=link]').click(function() {
var $this = $(this);
var x = $this.attr("className");
$('.toggle-item-' + x).slideDown('normal').siblings('div:visible').slideUp('normal');
return false;
});
/* This line here! */
$('.toggle-item-link1').slideDown('normal').siblings('div:visible').slideUp('normal');
});
</script>

superdooper
02-07-2009, 11:29 AM
That is perfect.
Thanks Adam!!!

superdooper
02-07-2009, 12:09 PM
Sorry, another question!
At the moment I am using these links to call the DIVs:
<a href="#" class="link1">
However, I would like to do it like twitter does, via a URL like:
http://example.com/jquerypage#link1
http://example.com/jquerypage#link2
etc etc.
What would i need to do with the code to make that happen?
Thanks again!

superdooper
02-07-2009, 02:09 PM
Sorry, another question!
At the moment I am using these links to call the DIVs:
<a href="#" class="link1">However, I would like to do it like twitter does, via a URL like:
http://example.com/jquerypage#link1
http://example.com/jquerypage#link2etc etc.
What would i need to do with the code to make that happen?
Thanks again!
For anyones reference: http://stilbuero.de/jquery/tabs/