html - Jquery ui tabs advanced issue on next and previous -

kindly visit fiddle: http://jsfiddle.net/9kq66/

what want: when user viewing, if of 1st 3 tabs tab 1, tab 2 or tab 3 active prev link hidden no 1 can back, , when of last 3 tabs tab 4, tab 5 or tab 6 active next link hidden no 1 can go further. how can that? (dynamically if possible)

here jquery code using:

$(".wrapper #tab1,.wrapper #tab2").tabs({active: 0}).tabs({         collapsible: false,         hide: {                 effect: "slideup",                 duration: 20         },         show: {                 effect: "slidedown",                 duration: 200         } });  var = $('.wrapper .main').addclass("passiv");  var = -1;  $('.wrapper .prev').click(function(e) {         e.preventdefault();         ctrlcontent( = !i ? all.length - 1 : --i ); }); $('.wrapper .next').click(function(e) {         e.preventdefault();         ctrlcontent( = ++i % all.length ); }).click();  function ctrlcontent(ele) {         all.removeclass("active").addclass("passiv");         all.eq(ele).removeclass("passiv").addclass("active"); }   $(function() {         $( ".wrapper .inner" ).buttonset(); }); 

n.b: new jquery ui, answer details if possible.

thank you

actually need make 2 small changes existing code:

• first - disable "cycle" function in 2 .click() handlers
• second - add condition in ctrlcontent() function show/hide next/prev links

click-handlers this:

$('.wrapper .prev').click(function(e) {     e.preventdefault();      // remove line, since causes "cycle" effect     // ctrlcontent( = !i ? all.length - 1 : --i );      // use logic:     // when on first tab nothing, since there no previous tab     if (i == 0) {         // not call ctrlcontent, since there no previous tab     } else {         -= 1;         ctrlcontent(i);     } });  $('.wrapper .next').click(function(e) {     e.preventdefault();      // remove line , add condition below:     //ctrlcontent( = ++i % all.length );      // when on last tab nothing, since there no next tab     if (i == all.length-1) {         // nothing, since there no next tab     } else {         += 1;         ctrlcontent(i);     } }).click(); 

the ctrlcontent function need few conditions decide links show:

function ctrlcontent(index_to_show) {    all.removeclass("active").addclass("passiv");    all.eq(index_to_show).removeclass("passiv").addclass("active");      // check if need show/hide prev/next links     if (index_to_show == 0) {         // on first page, hide "prev"-link         prev.hide();     }      if (index_to_show == all.length-1) {         // on last tab, hide "next"-link            next.hide();     }      if (index_to_show > 0) {         // on tab _after_ first one, there should "prev"-link         prev.show();     }      if (index_to_show < all.length-1) {         // tab _before_ last one, need "next"-link         next.show();     } } 

note: above examples not optimized. can write them shorter.

another remark me: should rename variable "i" "current_tab", etc. makes code easier read/debug.

---

here same code in shorter version:

$(".wrapper #tab1,.wrapper #tab2").tabs({active: 0}).tabs({         collapsible: false,         hide: {                 effect: "slideup",                 duration: 20         },         show: {                 effect: "slidedown",                 duration: 200         } });  var = $('.wrapper .main').addclass("passiv"); var prev = $('.wrapper .prev'); var next = $('.wrapper .next'); var tab_count = all.length-1; var = -1; // suggest call "current", etc. "i" no ides...  prev.click(function(e) {     e.preventdefault();         if (i != 0) {         -= 1;         ctrlcontent(i);     } });  next.click(function(e) {     e.preventdefault();      if (i < tab_count) {         += 1;         ctrlcontent(i);     } }).trigger('click');  function ctrlcontent(index_to_show) {    all.removeclass("active").addclass("passiv");    all.eq(index_to_show).removeclass("passiv").addclass("active");     if (index_to_show == 0) prev.hide();    if (index_to_show == tab_count) next.hide();    if (index_to_show > 0) prev.show();    if (index_to_show < tab_count) next.show(); }   $(function() {         $( ".wrapper .inner" ).buttonset(); });