• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

How to add a JQuery tab at a specific position.

I have a form with three tabs.  I want to add a tab between the second and third tab if a certain condition is met.  I am using the following code to add the tab, but it only appends the tab after the third tab.  How do I specify to place the new tab between the second and third tabs?  Do I need to remove the third tab, add the new third tab then add the old third tab as the new fourth tab???  TIA

$("#tabs").tabs("add","#tabs-3","Coupon");
$("#tabs-3").css("display","block");

Open in new window

0
brianmfalls
Asked:
brianmfalls
  • 5
  • 4
1 Solution
 
gdemariaCommented:
perhaps you should have the tab there from the start, but hidden, then all you need to do is display it... ?
0
 
brianmfallsAuthor Commented:
No dice.  I need it to be dynamic.  In future versions, we may allow the users to add multiple tabs.  I did think of that though.  Thanks qdemaria.
0
 
leakim971PluritechnicianCommented:
maybe : http://jsfiddle.net/g8L6F/1/
    $(function() {
        $( "#tabs" ).tabs();
        var $tabs = $("ul li:gt(1)","#tabs").detach();
        var $divs = $("ul div:gt(1)","#tabs").detach();
        $("#tabs").tabs("add","#tabs-3","Coupon");
        $tabs.insertAfter("#tabs>ul li:last");
        $divs.insertAfter("#tabs>ul div:last");
    });

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
brianmfallsAuthor Commented:
I'm home for the evening, but I'll try out your script first thing in the morning leakim.  Thanks for the help.  :)
0
 
brianmfallsAuthor Commented:
Leakim,  the script inserted the tab in the correct order, but it somehow blew the layout out.  I'haven't figured out how yet.  It's pretty messy once it executes.  (Lots of content to dig through to figure out the breaking point...)  :)
0
 
leakim971PluritechnicianCommented:
Your comments are about the test page?
0
 
brianmfallsAuthor Commented:
Yes.
0
 
leakim971PluritechnicianCommented:
check this : http://jsfiddle.net/g8L6F/3/

$(function() {
        $( "#tabs" ).tabs();

        $('<div id="tabs-4"><p>Hello</p></div>').appendTo("#tabs").addClass("ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide");

        $("#tabs").tabs("add", "#tabs-4", "Coupon")
        $("#tabs>ul>li:last").insertBefore("#tabs>ul>li:eq(2)");
    });

Open in new window

0
 
leakim971PluritechnicianCommented:
No need to add class : http://jsfiddle.net/g8L6F/4/

    $(function() {
        $( "#tabs" ).tabs();

        $('<div id="tabs-4"><p>Hello</p></div>').appendTo("#tabs");

        $("#tabs").tabs("add", "#tabs-4", "Coupon")
        $("#tabs>ul>li:last").insertBefore("#tabs>ul>li:eq(2)");
    });

Open in new window

0
 
brianmfallsAuthor Commented:
As always leakim, you are a great deal of help.  Thank you so much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now