Question

I need to display tabs dynamically based on the users’ permission as some user will have restriction for list of tabs. How can i do this in Struts2 or do we have any jquery plugin. The tabs can be n number and there can also be child tabs. Thanks in advance.

Answer 1

I am using this jQuery tab plug-in in my application. I have modified the html and jQuery code to display the default tab in order to display tab dynamically like you asked. Here it is what I did

HTML

<div class="container">

  <ul class="tabs">

        <li id="tab1head"><a href="#tab1">First heading</a></li>
        <li id="tab2head"><a href="#tab2">Second heading</a></li>
        <li id="tab3head"><a href="#tab3">Third heading</a></li>
  </ul>
  <div class="tab_container">

    <div id="tab1" class="tab_content">
            content of tab1
        </div>
        <div id="tab2" class="tab_content">
            content of tab2
        </div>
        <div id="tab3" class="tab_content">
            content of tab3
        </div>
  </div>
</div>

jQuery

call the following function when you want to display a particular tab dynamically

function someFunction(tabheadID,tabID){
  $("ul.tabs li").removeClass("active");  
  $(".tab_content").hide(); //Hide all content
  $("#"+tabheadID).addClass("active").show(); //tabheadID may be tab1head etc
  $("#"+tabID).show();  //tabID may be tab1 etc
}

You can dynamically create a tab by using document.createElement() or equivalent jQuery syntax, apply appropriate classes and IDs and thean appending to the container div