A Way To Simplify this JavaScript File? jQuery show/hide? -

A Way To Simplify this JavaScript File? jQuery show/hide? -

i have 4 divs, , 4 corresponding buttons. when click button1, shows div 1 , hides others. , and forth. instead of having list of divs hide, can have 'hide other divs' sort of string? not hide every div on page, hide every #div(number).

$(document).ready(function() { var h1 = $("#div56").height(); var h2 = $("#div54").height(); var h3 = $("#div47").height(); var h4 = $("#div45").height(); $("#div56,#div54,#div47,#div45").height(… h2, h3, h4)); $("#div54,#div47,#div45").hide(); }); $("#lnk56").live('click', function() { $("#div56").show(); $("#div54,#div47,#div45").hide(); }); $("#lnk54").live('click', function() { $("#div54").show(); $("#div56,#div47,#div45").hide(); }); $("#lnk47").live('click', function() { $("#div47").show(); $("#div56,#div54,#div45").hide(); }); $("#lnk45").live('click', function() { $("#div45").show(); $("#div56,#div54,#div47").hide(); });

this corresponding html/php:

<div class="grid_5"> <?php query_posts( 'post_type=credits&showposts=99999'); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post"> <div class="buttons"> <a id="lnk<?php the_id(); ?>" href="#"><h5><?php the_title(); ?></h5></a> </div><!--/buttons--> <?php wp_link_pages(array('before' => 'pages: ', 'next_or_number' => 'number')); ?> </div> <?php endwhile; endif; ?> </div><!--/grid_5--> <div class="grid_7"> <div class="scrollbox"> <div id="divparent"> <?php query_posts( 'post_type=credits'); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="info" id="<?php the_id(); ?>"> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div><!--/divparent--> </div> </div><!--/grid_7-->

you can hide using class , create dynamic, can utilize data-* attributes retrieve right id button , show corresponding div. see jsfiddle: http://jsfiddle.net/v9zzy/

$(document).on("click", "button", function(){ var id = $(this).attr('data-btn-id'); $(".mydivs").hide(); $("#div" + id).show(); }); <div id="div1" class="mydivs">hello 1</div> <button id="btn1" data-btn-id="1">btn 1</button> <div id="div2" class="mydivs">hello 2</div> <button id="btn2" data-btn-id="2">btn 2</button> <div id="div3" class="mydivs">hello 3</div> <button id="btn3" data-btn-id="3">btn 3</button> ...

jquery hide show