Simple jquery click 'next' to show next content

JavaScript
1

Hi,

If I have 3 contents let say, div id=content1, div id=content2, div id=content3 and a next and previous button.

How can I to create a simple jquery script to show the next or previous content when clicked on Next and Previous button ? Show only 1 content each time.

Anyone can help.

Thanks.

2

Why use jQuery?

It’s only a 3-4 lines of code to do it with plain javascript

3

You can use jQuery UI and follow this: http://css-tricks.com/2361-jquery-ui-tabs-with-nextprevious/

4

I agree with webdev1958 ( and am not even a js guy)
Anyway, it’s a strategy thing… and this way you can make it scalable…
You can tweak this method, I am just suggesting what seems most semantic:

1)DONT use IDs, use classes instead. so “class=‘content1’”
2) If dont already have a container specifically for ‘contentX’ make one nad give it an ID for the sake of example id=“cWrap”
3) Make generic “prev/next” buttons and put them as direct children of the ‘contentX’ divs
4) you can attach a function that uses .parent().attr(“class”) to which ‘contentx’ the button resides in, presumably this is the content that’s being viewed at the time. Note you may have to clean up the result if your content div has other classes as well.
5) So, once you have a clean return, you can remove the word “content” from the string and turn it into a number so that it can be used as a counter! counter=<del>content</del>1=1;!!
6) Now you can go ahead and hide the div with the class ‘content(counter)’ and show, depending on which button was pressed ‘content(counter+or-1)’
7) For good measure, you and add a limit or a cycle trough… that way if the user presses prev on the first content it doest go anywhere or it goes to the last div… etc. for example: if (counter!=1){show lower divs code}/if (counter<count$(‘cWrap’).children(); ){show higher divs code}

That the basic concept.

5

Thanks all for the advice given.

6

Code below, based on the link I gave before, and a fiiddle to try it out:


<!DOCTYPE html>
<html>
	<body>
		<div id="tabs">
			<div>Blah</div>
			<div>Blah blah</div>
			<div>Blah blah blah</div>
		</div>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script>
			$('#tabs div').first().attr('class', 'current');
			
			$('#tabs div').each(function(i) {
				i = i + 1;

				$(this).attr('id', 'tab-' + i);
				
				if(i !== $('#tabs div').size()) {
					$(this).append('<button class="tabPagination" rel="tab-' + (i + 1) + '">Next</button>');
				}
				if(i !== 1) {
					$(this).append('<button class="tabPagination" rel="tab-' + (i - 1) + '">Previous</button>');
				}				
			});			

			$('#tabs div[class!="current"]').hide();
			
			$('.tabPagination').live('click', function() {
				$('.current').removeAttr('class');
				$('#tabs div[class!="current"]').hide();
				$('#' + $(this).attr('rel')).show();
			});
		</script>
	</body>
</html>