Search code examples
jquerycsswordpressshowvisual-composer

Wordpress/Visual Composer - Show 1 div when another div is clicked

I would be forever grateful if someone could help me out with this...

I've been trying to implement this feature for 4 days now, no joke.. I have researched everywhere, tried everything, and I finally accept that I'm defeated.

I know this is probably an incredibly simple javascript/jQuery function, but I can't get any of the functions I've tried to work within Visual Composer

Important Info: I'm using Visual Composer inside wordpress. Visual Composer allows you to add classes to elements (divs), but not id's. Visual Composer has a "raw javascript" element, a "raw html" element, and a separate section to enter CSS.

Setup: I have two images (div Aa and Ab) which are links to a separate part of the page. I also have two sections of content (div Ba and Bb).

What I am trying to do: div Aa and Ab should be hidden by default. When div Aa is clicked, Ba appears and Bb stays hidden. When div Ab is clicked, Bb appears and Ba stays hidden. If Bb is already visible and Aa is clicked, Bb disappears while Ba appears, and vice versa

I've come pretty close with this script:

HTML

<div id="Aa">Image #1</div>
<div id="Ab">Hidden Content #1</div>
<div id="Ba">Image #2</div>
<div id="Bb">Hidden Content #2</div>

CSS

#Ab{display:none;}
#Bb{display:none;}

Javascript

$('#Aa').click(function() {
$('#Ab').show();
});

$('#Ba').click(function() {
$('#Bb').show();
});

However, I can't get it to work in Visual Composer (VC) for the life of me! I've tried changing all the "#" to "." to refer to the class names VC forces me to use. I've tried changing all the "$" to "jQuery" as I read somewhere wordpress needs it formatted that way. I tried adding the <script></script> tags around it, and calling (?) the function such like <script src="">... Nada.

Solution

  • You can use css id in row or inner in the visual composer. Well, you can use class in elements under the extra class element or inner column.

    For suppose, first you select the single image and type "Aa" (without quotes as well without "." period) in the extra class like below image:

    enter image description here

    Now select another element text block and type class "Ab", create two other elements or copy paste and change the classes "Ba", "Bb" vice versa.

    Now you have four elements two single image and two text block. Add one more element Raw JS from structure tab and paste following jquery code.

    <script>
jQuery(document).ready(function(){
 jQuery('.Aa').click(function() {
    jQuery('.Ab').show();
});
 jQuery('.Ba').click(function() {
    jQuery('.Bb').show();
});
});
</script>

    Add CSS to visual composer, click gear icon on top. (see image):

    enter image description here

    Paste below css code:

    .Ab,
.Bb {
    display: none;
}

.Aa,
.Ba {
    cursor: pointer;
}

    That's end, now you click on image, text block will show. Here is back-end look.

    enter image description here

    Here is front-end look before click.

    enter image description here

    And here is fornt-end look after click.

    enter image description here

    Also other ways to accomplish, using wp_enqueue_script and wp_equeue_style hook to add js and css in wordpress. Hope, this help you.