Ok So we have 8 Div's, all labelled #one, #two, #three ect..

When you click on the show attractions button, a <p> disappears and then I want the first div to show, on clicking the button again I'd like to hide the current Div and show the next in order,

Here is the code so far



Code:
 $('.hide').click( function() {
		if ($('.showhide').is(':visible')) {
            $('.showhide').slideUp(1200)
			$(this).html('Next Attraction')
		$('#one').delay(1500).slideDown(500);
			
		}
		else if ($('#one').is(':visible')) {
		$('#one').css('display' , 'none');
		$('#two').fadeIn(500)
		}
		
		else if ($('#two').is(':visible')) {
		$('#two').css('display' , 'none');
		$('#three').fadeIn(500)
		}
		
		else if ($('#three').is(':visible')) {
		$('#three').css('display' , 'none');
		$('#four').fadeIn(500)
		}
		
		else if ($('#four').is(':visible')) {
		$('#four').css('display' , 'none');
		$('#five').fadeIn(500)
		}
		
		else if ($('#five').is(':visible')) {
		$('#five').css('display' , 'none');
		$('#six').fadeIn(500)
		}
		
		else if ($('#six').is(':visible')) {
		$('#six').css('display' , 'none');
		$('#seven').fadeIn(500)
		}
		
		else if ($('#seven').is(':visible')) {
		$('#seven').css('display' , 'none');
		$('#eight').fadeIn(500)
		}
		
		
		else {
			$('#eight').css('display' , 'none');
		$('#one').fadeIn(500)
			
		}
		
		
		
	});
It works, but is such a backwards why of doing it.

I have tried a for loop but it brings out all the elements.

Thank you for your time.