Here is one way to do it based on the markup you've shown:
<html>
<head>
<style type="text/css">
div { display: none; }
#no-1 { display: block; }
</style>
<script
type="text/javascript"
src="http://cachefile.net/scripts/jquery/1.2.3/
jquery-1.2.3.min.js">
</script>
<script type="text/javascript">
$(function(){
$('div[id~="no"]').click(function(){
$(this).hide().next().show();
});
});
</script>
</head>
<body>
<div id="no-1">Content 1</div>
<div id="no-2">Content 2</div>
<div id="no-3">Content 3</div>
<div id="no-4">Content 4</div>
</body>
</html>
- jason
On Mar 24, 11:07 pm, Ian Fenn <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm puzzling over something and would be grateful for some help...
>
> I've got four divs on the screen that I have hidden and wish to step through
> with each user click. So, the first div is shown... A user then clicks...
> The first div is then hidden and the second revealed... A user then
> clicks... The second div is then hidden and the third revealed... And so
> on...
>
> I thought I could achieve this using the following markup:
>
> <div id="no-1">Content 4</div>
> <div id="no-2">Content 4</div>
> <div id="no-3">Content 4</div>
> <div id="no-4">Content 4</div>
>
> for (var i = 1; i < 5; i++) {
> $('#no-'+i).show().click(function() {
> $(this).hide(1000);
> });
> };
>
> }
>
> ...but this results in all divs being shown immediately - presumably the
> loop is being executed without a click being required?
>
> Is there a simple way around this?
>
> All the best,
>
> --
> Ian
