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

i forever grateful if me out this...

i've been trying implement feature 4 days now, no joke.. have researched everywhere, tried everything, , accept i'm defeated.

i know incredibly simple javascript/jquery function, can't of functions i've tried work within visual composer

important info: i'm using visual composer inside wordpress. visual composer allows add classes elements (divs), not id's. visual composer has "raw javascript" element, "raw html" element, , separate section enter css.

setup: have 2 images (div aa , ba) links separate part of page. have 2 sections of content (div ba , bb).

what trying do: div aa , ab should hidden default. when div aa clicked, ba appears , bb stays hidden. when div ab clicked, bb appears , ba stays hidden. if bb visible , aa clicked, bb disappears while ba appears, , vice versa

i've come pretty close 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, can't work in visual composer (vc) life of me! i've tried changing "#" "." refer class names vc forces me use. i've tried changing "$" "jquery" read somewhere wordpress needs formatted way. tried adding <script></script> tags around it, , calling (?) function such <script src="">... nada.

you can use css id in row or inner in visual composer. well, can use class in elements under class element or inner column.

for suppose, first select single image , type "aa" (without quotes without "." period) in class below image:

now select element text block , type class "ab", create 2 other elements or copy paste , change classes "ba", "bb" vice versa.

now have 4 elements 2 single image , 2 text block. add 1 more element raw js structure tab , 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 visual composer, click gear icon on top. (see image):

paste below css code:

.ab, .bb {     display: none; }  .aa, .ba {     cursor: pointer; } 

that's end, click on image, text block show. here back-end look.

here front-end before click.

and here fornt-end after click.

also other ways accomplish, using wp_enqueue_script , wp_equeue_style hook add js , css in wordpress. hope, you.