Question

Here is my HTML code

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

And my 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 exactly how I want it too, by changing the width of column to 400px when I click the div ‘open’. It then hides the div ‘open’, shows the div ‘close’ and shows the div ‘content’. Click the ‘close’ div, and it closes it all up.

Though, when I duplicate the div ‘column’ along with all it’s child divs and click the ‘open’ div, it opens both ‘column’s. I knew this would happen.

How do I change the code so when I click on the ‘open’ div, it opens JUST it’s parent div ‘column’ while leaving the other div’s closed? I am so new to actually editing Jquery that all of this makes no sense to me.

Here is it all laid out on jsFiddle: http://jsfiddle.net/ryanjay/AggB8/

Thanks in advance!

Answer 1

You can use the 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(); });
});