Show or hide a element by class when you click a specific link

Question

I'm using WPBakery Page Builder for tabs. And I want to show a text block outside the tab section (on a diferent row) with a specific class when first tab with href #1521496635357-e8313acf-e8c2 is open and another text block when the secound tab with href #1521496635380-99d0c08b-67d8 is open (and the first text block to be hidden).

Can you give me a hint with CSS or JS?

Thank you!

    <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab vc_active" data-vc-tab="">
    <a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX STANDARD</span>
</a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
<a href="#1521496635380-99d0c08b-67d8" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">PRIX BUDGET</span>
</a>
    </li>
    </ul>

score 0 · Answer 1 · answered Apr 12 '18 at 22:14

Your example is not entirely clear to me, but you should be able to add event listeners to your tabs:

<a href="#1521496635357-e8313acf-e8c2" data-vc-tabs="" data-vc-container=".vc_tta" onclick="doSomething()">

In your page javascript, you could have a function that does something:

function doSomething() {
    document.getElementsByClassName("myclass")[0].style.display = "none";
    document.getElementsByClassName("myotherclass")[0].style.display = "inline";
}

You could certainly handle this better by introducing jquery or another framework to simplify some of this handling, but depending on your situation that may or may not be feasible.

Show or hide a element by class when you click a specific link

1 Answers1