SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple jquery click 'next' to show next content

    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. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why use jQuery?

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

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can use jQuery UI and follow this: http://css-tricks.com/2361-jquery-ui...-nextprevious/

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for the advice given.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code below, based on the link I gave before, and a fiiddle to try it out:
    HTML Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •