Search code examples
javascripthtmljquerycssunbounce

Multiple tab sections on the same page

I am using the following script for the tab section. How can I create the second tab panel on the same page with a different id? HTML is auto-populated so can not be modified.

As this page is created using Unbounce, unable to modify the HTML.

HTML

<div class="lp-element lp-pom-box" id="lp-pom-box-290">
    <a class="lp-element lp-pom-button active" id="lp-pom-button-283" target="_self"><span class="label">TAB 1</span></a>
    <a class="lp-element lp-pom-button" id="lp-pom-button-284" target="_self"><span class="label">TAB 2</span></a>
    <a class="lp-element lp-pom-button" id="lp-pom-button-285" target="_self"><span class="label">TAB 3</span></a>
    <a class="lp-element lp-pom-button" id="lp-pom-button-286" target="_self"><span class="label">TAB 4</span></a>
</div>

<div class="lp-element lp-pom-box" id="lp-pom-box-241">
    <div id="lp-pom-box-241-color-overlay"></div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-292" style="">
        tab1
    </div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-297" style="display: none;">
        tab 2
    </div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-307" style="display: none;">
        tab 3
    </div>
    <div class="lp-element lp-pom-box" id="lp-pom-box-309" style="display: none;">
        tab 4 
    </div>
</div>

JS code

Solution

  • Should be a simple case of wrapping your current JS in a function that takes the two container IDs as parameters

    function initTabs(tabId, contId){
    // only changes needed are these IDs
    var navButtons = $('#' + tabId+ ' a');
    //Replace #lp-pom-box-331 with the ID of your content box
    var contentBoxes = $('#' +contId +' .lp-pom-box');
    
    // remainder of code the same    
}

// usage
initTabs('lp-pom-box-290', 'lp-pom-box-241')