how to add tabs Dynamically with dynamic content.?

Question

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

Furkan Başaran · Accepted Answer · 2014-03-02 21:02:06Z

$('#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();
});

Collectives™ on Stack Overflow

how to add tabs Dynamically with dynamic content.?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related