Twitter Bootstrap tabs are very light weight and very easy to use with few lines on code.But if you want perform operations like adding new tab ,adding close button to tab and removing tabs then you need to customise as per the requirement.
Below is a sample example which will allow you to perform below operations :
Note This example uses bootstrap v 2.2.2 and jquery v1.9.
- Adding new tab
- Deleting tab
- Showing tab
- Adding close icon to tab
- Getting element from current tab ( example : if there are two tabs having textarea with same id or same class name then when $("#someId") will return both the text area from these two tabs this method will take care of this )
Download Example Here
Below is demo: (Run below fiddle in full screen to see the proper output )
Click below links to see jsfiddle demo :
Download Example Here
If you find this post useful please share and comments. Thanks you :)
hi, very good sample !!!
ReplyDeletewhat should i do to upgrade this sample to bootstrap 3 ?
I think there are not much changes made for tabbing but could you please compare the changes made for tabbing in bootstrap 3 with above code using below link.
Deletehttp://getbootstrap.com/javascript/#tabs
I just can say that you saved me because I was looking everywhere for this kind of example. Thank you so much!
ReplyDeleteYour Welcome :)
DeleteThe tabs don't render correctly in IE. The close button floats to the right and the label shows on the next line.
ReplyDeleteExcellent article Vikram..
ReplyDeleteHow can I load user control (using asp.net) in newly created tab; Specifically when clicked on Compose Button ??
its not compatible with google chrome
ReplyDeleteHi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog.
ReplyDeleteReally very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai .
or learn thru Javascript Training in Chennai.
Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai
This is an awesome post.Really very informative and creative contents about Java. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge..
ReplyDeleteJava training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery
AI-generated captions and real-time human interpretations are important when it comes to consuming content online as they help make event content more accessible to both diverse audiences and attendees. sample event invitation and introduction of speaker sample
ReplyDelete