Multiple tabview in same webcontent - LIFERAY - YUI library

Question

I want to include 2 tabviews (2 individual groups of tabs) in the same webcontent in Liferay.

I don't know is it possible to instance twice the YUI().use('aui-tabview'...) or how I could do it.

With only one instance, my code runs.

This is the code of the instances to YUI library (aui-tabview):

YUI().use(
  	'aui-tabview',
  	function(Y) {
	    new Y.TabView(
	      	{
	    		srcNode: '#tabsPubs',
	       		type: 'pills'
	      	}
    	).render();
  	}
);

YUI().use(
  	'aui-tabview',
  	function(Y) {
	    new Y.TabView(
	      	{
	    		srcNode: '#tabsTesis',
	       		type: 'pills'
	      	}
    	).render();
  	}
);

Thanks in advance

Answer 1

Please check this link https://alloyui.com/examples/tabview/pills

You can create 2 tabviews. Following code is working fine for me:

<div id="myTab"></div>

<div id="myTab1"></div>

<script>

YUI().use(
          'aui-tabview',
          function(Y) {
            new Y.TabView(
              {
                children: [
                  {
                      content: '<br><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta aspernatur beatae fuga neque cupiditate laudantium itaque pariatur deleniti tenetur modi voluptatem animi sunt eligendi nisi corporis expedita quaerat facilis.</p>',
                      label: 'Tab #1'
                  },
                  {
                      content: '<br><p>Doloremque beatae rem voluptate nulla perspiciatis atque laudantium nihil impedit molestiae fuga veritatis quibusdam nam maiores aliquid. Deserunt dolorum quas temporibus enim ex nihil nemo perspiciatis. Nisi deserunt rem id pariatur in nostrum?</p>',
                      label: 'Tab #2'
                  },
                  {
                      content: '<br><p>Aliquid ipsum asperiores alias temporibus autem impedit soluta ut id iure explicabo veritatis consectetur debitis eaque recusandae odit quas nobis maxime saepe. Incidunt amet obcaecati. Ducimus soluta unde repellat laboriosam fuga modi rem itaque!</p>',
                      label: 'Tab #3'
                  }
               ],
               srcNode: '#myTab',
               type: 'pills'
              }
            ).render();
          }
        );



YUI().use(
          'aui-tabview',
          function(Y) {
            new Y.TabView(
              {
                children: [
                  {
                      content: '<br><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta aspernatur beatae fuga neque cupiditate laudantium itaque pariatur deleniti tenetur modi voluptatem animi sunt eligendi nisi corporis expedita quaerat facilis.</p>',
                      label: 'Tab #1'
                  },
                  {
                      content: '<br><p>Doloremque beatae rem voluptate nulla perspiciatis atque laudantium nihil impedit molestiae fuga veritatis quibusdam nam maiores aliquid. Deserunt dolorum quas temporibus enim ex nihil nemo perspiciatis. Nisi deserunt rem id pariatur in nostrum?</p>',
                      label: 'Tab #2'
                  },
                  {
                      content: '<br><p>Aliquid ipsum asperiores alias temporibus autem impedit soluta ut id iure explicabo veritatis consectetur debitis eaque recusandae odit quas nobis maxime saepe. Incidunt amet obcaecati. Ducimus soluta unde repellat laboriosam fuga modi rem itaque!</p>',
                      label: 'Tab #3'
                  }
               ],
               srcNode: '#myTab1',
               type: 'pills'
              }
            ).render();
          }
        );
</script>