Using Javascript to create nested tabs in WordPress?

Side note: I’ve been designing in wordpress for only a few months, and don’t know where else or how else to ask this, so my language may seem somewhat inaccurate.

I’m using the Jupiter theme within WordPress to create my site, which is essentially a textbook. One of the chapters has content I’ve created with the “tabs’ element on the Visual Composer front-end editor. However, the content needs to be formatted so that for each of 5 tabs, within each tab there are nested tabs.

Read More

Apparently this function isn’t allowed in Visual Composer(dragging the tabs element within another tabs element), so I created class names for each tab and used javascript to append the tabs to be within the corresponding tab. If anyone could assist and tell me why I can’t seem to move the other classes to the new tabs, I would really appreciate it. I also tried putting the tabs within an accordion, and that fails as well.

This method works for the first occurrence of a nested tab, but for the others, the same javascript fails to work.

The page I need assistance on: Chapter 10

The javascript:

//These next few lines relate to the Chapter 10 page
$('.tabonecontent').appendTo($(".tabone").parents(".mk-tabs-pane"));
$('.tabtwocontent').appendTo($(".tabtwo").parents(".mk-tabs-pane"));
$('.tabthreecontent').appendTo($(".tabthree").parents(".mk-tabs-pane"));
$('.tabfourcontent').appendTo($(".tabfour").parents(".mk-tabs-pane"));
$('.tabfivecontent').appendTo($(".tabfive").parents(".mk-tabs-pane"));    

Related posts