CODEWITHSUNDEEP
jquerydynamicjquery-ui-tabstabcontainer
user2483037
user2483037

Reputation: 21

how to add tabs Dynamically with dynamic content.?

Hi I want to add tabs dynamically using Jquery based on list coming from Database.Each tab content is also list.So when i am clicking on each tab only that tab content should be displayed. Iam able to add the tabs dynamically but all the tabs content(data) it is showing at a time.I want to display the list according to the Tab click.For eg: if clicked Manager tab only manager list should be displayed,if clicked on Trainees tab only trainees details should be displayed.

Link:http://www.jankoatwarpspeed.com/dynamic-tabs-using-jquery-why-and-how-to-create-it/

Thanks in Advance

Upvotes: 2

Views: 2051

Answers (1)

Furkan Başaran
Furkan Başaran

Reputation: 1947

$('#tabs a.tab').live('click', function() {
  // Get the tab name
  var contentname = $(this).attr("id") + "_content";
  // hide all other tabs
  $("#content p").hide();
  $("#tabs li").removeClass("current");
  // show current tab
  $("#" + contentname).show();
  $(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
  // Get the tab name
  var tabid = $(this).parent().find(".tab").attr("id");
  // remove tab and related content
  var contentname = tabid + "_content";
  $("#" + contentname).remove();
  $(this).parent().remove();
});

this codes using a live() method, live method was changed in new jquery versions. you can use on() method like this.

 $('body').on('click','#tabs a.tab' function() {
  // Get the tab name
  var contentname = $(this).attr("id") + "_content";
  // hide all other tabs
  $("#content p").hide();
  $("#tabs li").removeClass("current");
  // show current tab
  $("#" + contentname).show();
  $(this).parent().addClass("current");
});
$('body').on('click','#tabs a.remove' function() {
  // Get the tab name
  var tabid = $(this).parent().find(".tab").attr("id");
  // remove tab and related content
  var contentname = tabid + "_content";
  $("#" + contentname).remove();
  $(this).parent().remove();
});

Upvotes: 1

Related Questions