[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to add a JQuery tab at a specific position.

Posted on 2011-10-18
10
Medium Priority
?
392 Views
Last Modified: 2012-05-12
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
Comment
Question by:brianmfalls
  • 5
  • 4
10 Comments
 
LVL 39

Expert Comment

by:gdemaria
ID: 36987896
perhaps you should have the tab there from the start, but hidden, then all you need to do is display it... ?
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 36988079
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
 
LVL 83

Expert Comment

by:leakim971
ID: 36989816
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:brianmfalls
ID: 36990132
I'm home for the evening, but I'll try out your script first thing in the morning leakim.  Thanks for the help.  :)
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 36994516
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
 
LVL 83

Expert Comment

by:leakim971
ID: 36994527
Your comments are about the test page?
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 37006685
Yes.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 37008006
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
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 37008013
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
 
LVL 1

Author Closing Comment

by:brianmfalls
ID: 37009055
As always leakim, you are a great deal of help.  Thank you so much.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month20 days, 4 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question