How to make hidden tab visible?

[Michael Baas]

I am creating an ejTab-Instance with 4 Tabs, 2 of them are hidden initially (through .hiddenItemIndex.  If i read correctly, showItem should be able to make a hidden tab visible again

[Michael Baas]

So, when I do $("#id").data("ejTab").showItem(2);, something gets visible: the content of that tab. But not the tab itself (including the register-thing on top with the name of the tab). How it it possible to show the tab in its fully glory? ;-)

[Kasithangam C]

Hi Michael, 

Thanks for contacting Syncfusion support. 

We have checked the reported issue in our end. The cause of the issue “hidden tab not visible when using showItem method” is not updating the hidden tab items array. “showItem” method is used to active the hidden tab item. To resolve the issue, we need to update the “hiddenItemIndex” property before activating the tab item by using the showItem method as shown below: 

<code> 

  <script type="text/javascript"> 

       

      function onclick(args){ 

           var tabObj = $("#apiTab").data("ejTab"); 

                     tabObj.option("hiddenItemIndex",[0]); 

                     tabObj.showItem(1); 

      } 

    </script> 

</code> 

We have prepared the sample based on your requirement and it is available under the following link: 

http://jsplayground.syncfusion.com/jivralyd 

Regards, 

Kasithangam 

[Michael Baas]

Thanks Kasithangam, that looks nice - in theory. But I am trying to make a tab visible through a function (and select the tab as argument) - and I can not get that to work.

I must be doing something wrong, but for the life of me I can not see what I am missing - may I ask for your help once again?

I modified your sample-fn as follows - running that affects the ejTab, but not in the way I expected it to do.

      function onclick(args){
           var tabObj = $("#apiTab").data("ejTab");
//tabObj.option("hiddenItemIndex",[0]);
//tabObj.showItem(1);
        // use variable i (which might be arg to a fn) to selec the tab to be shown
        var i=1;
        var hdn = tabObj.option("hiddenItemIndex");
        var j=hdn.indexOf(i);
        hdn.splice(j,1);
        tabObj.option("hiddenItemIndex",hdn);
        tabObj.showItem(i);
      }

[Kasithangam C]

Hi Michael,  

Thanks for your update. 

We have checked your provided code. In that, you have tried to get the value from hdn variable using “splice()” method and assign that to “hiddenItemIndex” property via setModel.When we assign same value to hiddenItemIndex property,the setModel will not be fired. So you can “slice()” jquery method  instead using “splice()” method.Please find the code for the same: 

<code> 

<script type="text/javascript"> 

      var tabObj,hdn 

        

      function onclick(args){ 

           tabObj = $("#apiTab").data("ejTab"); 

         hdn = tabObj.option("hiddenItemIndex"); 

                     var i=1; 

        var j=hdn.indexOf(i); 

        var val=hdn.slice(0,j); 

        tabObj.option("hiddenItemIndex",val); 

        tabObj.showItem(i); 

      } 

            </script> 

</code> 

We have modified the sample based on your requirement and it is available under the following link: 

http://jsplayground.syncfusion.com/hrvfe0sj 

Regards, 

Kasithangam