javascript - How to show hidden content according to clicked value jquery? -

sorry midunderstanding. meant index, not value. sorry.

i wondering if there way use value of shown content ".wbox" of jsfiddle example coincide hidden value, when clicked show hidden content?

for example, when cont 1 clicked, hidden box 1 shows. when cont2 clicked, hidden box 2 shows... , forth.

here fiddle: http://jsfiddle.net/kqbltn8b/1/

html:

<div class="box">     <div class="content one">         <h1>cont 1</h1>     </div>     <div class="content two">         <h1>cont 2</h1>     </div>     <div class="content three">         <h1>cont 3</h1>     </div> </div>  <div class="hidden-content">     <div class="hidden-box b-one">one</div>     <div class="hidden-box b-two">two</div>     <div class="hidden-box b-three">three</div>     </div> 

jquery:

var boxval = $('.box').val(); 

thanks help!

what trying shorten code this:

$('.one').on('click', function(){     $('.b-one').show() }); 

and forth rest

try : use index of content div show hidden-box

$(function(){     $('.content').click(function(){       var index = $(this).index();         $('.hidden-content .hidden-box:eq('+index+')').show();     }); }); 

and make change in css, instead of hiding hidden-content div need hide hidden-box. change

.hidden-content{     display:none; } 

to

.hidden-box{     display:none; } 

demo