0

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.

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"));    
0

A couple of things before I get into the code:

1) It would probably be a cleaner solution to solve this in the theme via extended functionality (PHP modifications) as you gain more experience with WordPress.

2) If you are able to use numbers (1,2,3) instead of words (one,two,three) you can clean up the javascript solution even further.

On with the code!

See the fiddle for a working example: https://jsfiddle.net/2nzcnhwL/

// run after load to be safe
$(document).ready(function () {
    // map our numbers to words
    var subTabGroups = ['one','two','three','four','five'];
    // loop through all of the panes
    $('.mk-tabs-pane').each(function (i) {
        // append each group of subtabs to the corresponding pane
        $(this).append($('.tab' + subTabGroups[i] + 'content'));
    });
});
1

I managed to fix my issue, by creating a loop of the tabs being appended. Thanks for the help! I'll look into how I can also solve this problem in PHP as well.

//These next few lines relate to the Chapter 10 page
var tabs = ["one", "two", "three", "four", "five"];
for(var i = 0; i<tabs.length; i++){
    tabNum = tabs[i];
    $('.tab'+tabNum+'description').appendTo($(".tab"+tabNum).parents(".mk-tabs-pane"));
    $('.tab'+tabNum+'content').appendTo($(".tab"+tabNum).parents(".mk-tabs-pane")); 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.