jquery - How do I change my code so the .click acts upon it's parent element? -

here html code

<div class="column">   <div class="open"></div>   <div class="close"></div>   <div class="content">         content. content. content. content. content. content.this content. content. content. content. content. content. content. content. content. content.    </div>  </div>  

and jquery

$(document).ready(function() {     //page load     $('.column').css({         width: '30px'     });     // open     $('.open').click(function() {         $('.column').animate({             width: '400px'         }, 200);         $('.open').hide();         $('.close').show();         $('.content').fadein('slow', function() {             $('.content').show(); });     });      // close     $('.close').click(function() {         $('.column').animate({             width: '30px'         }, 500, function() {             $('.content').hide();             $('.close').hide();             $('.open').show();          });     });  }); 

this works how want too, changing width of column 400px when click div 'open'. hides div 'open', shows div 'close' , shows div 'content'. click 'close' div, , closes up.

though, when duplicate div 'column' along it's child divs , click 'open' div, opens both 'column's. knew happen.

how change code when click on 'open' div, opens it's parent div 'column' while leaving other div's closed? new editing jquery of makes no sense me.

here laid out on jsfiddle: http://jsfiddle.net/ryanjay/aggb8/

thanks in advance!

you can use siblings selector.

$('.open').click(function() {     $(this).parent().animate({         width: '400px'     }, 200);     $(this).hide();     $(this).siblings('.close').show();     $(this).siblings('.content').fadein('slow', function() {         $(this).show(); }); });