<ul id="toggle">
<li class="previous"><a id="prev" href="#cat">previous</a></li>
<li class="next"><a id="next" href="#dog">next</a></li>
</ul>
I’m trying to force previous to be hidden until next is clicked and when next is clicked the link will change from #dog to #sheep.
Does anyone know an article or something on this?
Something similar to this but not this one. (:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Styled Radios</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".previous").hide(0);
$(".next").click(function(){
$(".previous").show(0);
$(this).find('a').attr('href', '#sleep');
});
});
</script>
</head>
<body>
<ul id="toggle">
<li class="previous"><a id="prev" href="#cat">previous</a></li>
<li class="next"><a id="next" href="#dog">next</a></li>
</ul>
</body>
</html>
Thanks. Should be able to work out the rest from this. 
That is what I also want from you. But if you still stuck somewhere, I (we are) am here for you. Let us know.
rajug, a query - why are you passing “0” to the show and hide methods? Just curious.
@rajug, you should be caching selections to be used in event handlers. I.e.
var previous = $(".previous").hide(),
next = $('.next'),
nextAnchor = next.find('a');
$(".next").click(function(){
previous.show();
nextAnchor.attr('href', '#sleep');
});
Jimmy, I don’t see how that is an improvement. Doing $(‘.next’) creates an anonymous jQuery object anyway, so “caching” it isn’t necessary, as it is only used once. The only thing that could be improved in rajug’s contribution is to store $(‘.previous’) in a variable. I also don’t see how creating nextAnchor is an improvement - surely the use of $(this) is sensible?
Ah, sorry, I meant to do
next.click(...)
…
nextAnchor
is needed so that you don’t need to go searching for an anchor everytime the handler is called. I.e. instead of:
$(this).find('a').attr....
you can do:
nextAnchor.attr....
Here’s the code that I originally intended:
var previous = $(".previous").hide(),
next = $('.next'),
nextAnchor = next.find('a');
next.click(function(){
previous.show();
nextAnchor.attr('href', '#sleep');
});
Are you sure that’ll work? Won’t that just set the href attribute of all the nextAnchors to #sheep every time a “next” link is clicked? This is why I think you actually need $(this). If you’re worried that find() is slow, then doing $(this).firstChild() would be a suitable alternative.
Raffles, nothing such special reason but to avoid the animations since the function’s first argument can be a string or number (milliseconds) and the 0 here means without any animation. I normally pass it instead of the string ‘fast’.
http://docs.jquery.com/Effects/show:
A string representing one of the three predefined speeds (“slow”, “normal”, or “fast”) or the number of milliseconds to run the animation (e.g. 1000).
BTW do you think that it gives any problem passing milliseconds to the function?
Edit:
And I just did not think that we need to caching in such a small bunch of HTMLs.
@Raffles, you’re right… Gosh, I’m not on form 
Yeah, but rajug, look at the documentation:
http://docs.jquery.com/Effects/show
show()
Same as show( speed, [callback] ) without animations.
So there is no need to pass anything if you want no animation. And I don’t know what you mean about passing milliseconds to the function being a problem… if you’re wondering what it’ll do with 0, then it’ll just be processed by the browser (via setInterval or setTimeout) as fast as it can. It often depends on the browser, if I remember correctly Safari makes 20ms the limit for intervals or timeouts for example.
And I wouldn’t worry much about caching in this instance, but it’s always worth doing for things like $(“.previous”) if you’re going to reuse the same collection of elements.
It happens to the best of us. 
Umm… do you mean if I pass 0 to the function the browser will has to process the value and it may take time and be slower? I was not aware of it. My only thinking is if I give 0 to the function then it will be faster (fastest one actually).
I think it needs some benchmarking or so and will try to do it later when become free. But here I don’t mean that we must pass 0. This is the way what I normally used to do with the show/hide methods of jquery.
Agreed! In this instance I did not use it storing the jquery object in a variable because there only two uses of it.
All I mean is you don’t need to pass anything at all to it. Read the documentation! That’s what it says - without any parameters it’ll just show/hide without animations.
I think what I’m trying to achieve is a little more complicated then this.
I have four DIVs spaced out across the page. I’m trying to get the first next link to point to DIV #two and once this is done, the link will change to href=“#three” and the previous link will appear. Does that make more sense?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Styled Radios</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".previous").hide(0);
$(".next").click(function(){
$(".previous").show(0);
$(this).find('a').attr('href', '#three');
});
});
</script>
</head>
<body>
<ul id="toggle" style="position:fixed;top:0;left:0;z-index:99">
<li class="previous"><a id="prev" href="#one">previous</a></li>
<li class="next"><a id="next" href="#two">next</a></li>
</ul>
<div id="one" style="display:block;height:100%;width:100%;background:#eee;position:absolute;top:0">one</div>
<div id="two" style="display:block;height:100%;width:100%;background:#ccc;position:absolute;top:1000px;">two</div>
<div id="three" style="display:block;height:100%;width:100%;background:#ddd;position:absolute;top:2000px;">three</div>
<div id="four" style="display:block;height:100%;width:100%;background:#bbb;position:absolute;top:3000px;">four</div>
</body>
</html>
Umm it seems that you are looking for something like paginations. If so why don’t you try once some jquery pagination plugins>
Otherwise can you tell us your purpose of doing that way changing the href attribute upon clicking?
From the progress of your method changing the href on first click jumped to #three intstead of #two and after much reading up I couldn’t really work out what was wrong. xD
Javascript really isn’t my strongest point.
However the link you just posted looks like it could do the job. Thank you!
Okay heres the final product
Any idea why the scrollto only works on the first click? 
As far as I know, this.hash should not be anything, especially as in the jQuery context this doesn’t refer to the element ($(this) does).
Looking at the documentation, the first argument should be a DOM element to scroll to or a number, among other things. So you will want to use $($(this.attr('href')) instead of this.hash.
I’m not entirely sure this is the issue, but I can’t see anything else that looks amiss.
BTW, your wire.png image is far too big. It takes ages to download, many visitors will lose patience - I was wondering what on earth was going on (although I suppose it’ll be less bad once you have some more content there). Still, you have to try to get it below about 100K. Reduce the quality, make it shorter and repeat it, and perhaps try using pngcrush.