Expand and contract divs separately horizontally onclick

Question

I have a jfiddle below that has two links that expand two divs independently and horizontally. http://jsfiddle.net/j9W7R/

How would I go about causing only one div to be seen any any given time? Say you click the first one, then click the second and it causes the first to contract. Or if you click the first and click the first again it would also retract.

The idea is that the link will be a Facebook icon, the next link will be another social media icon, etc. etc. and I will embed a little "like us" or some sort of interaction with user.

Answer 1

You can do it next way:

To all your sliding <div>s add some class. class="slickbox" for example.

And each .click() start with $('.slickbox').hide(); hiding all boxes first and than expanding the one you need.

For e.g.:

<div style="clear:both;">

  <div style="float:left;">
    <a href="#" id="slick-slidetoggle2">Slide toggle the box 2</a>
  </div>

  <div id="slickbox2" class="slickbox">
    2: This is the box that will be shown and hidden and toggled at your whim. :)
  </div>

</div>

And one of clicks will look like this.

$('#slick-slidetoggle2').click(function() {
    $('.slickbox').hide(); // hide all boxes (doesn't matter if they were opened or not)
    $('#slickbox2').show('slide', 400); // and open one that was clicked
    return false;
});

This way you can extend your Like Us easily adding new items without writing .hide() for each opened/closed item.

UPDATE: And if you need to close item if user again clicks on it, you can change show/hide section of the button .click() handler to the following.

$('#slick-slidetoggle2').click(function() {

    if ( $('#slickbox2').is(':hidden') ) { // check if current box is hidden
        $('.slickbox').hide(); // hide all boxes (doesn't matter if they were opened or not)
        $('#slickbox2').show('slide', 400); // and open this one
    } else // if it was already opened
        $('#slickbox2').hide('slide', 400); // hiding the box

    return false;
});

:hidden selector will track the state of object visibility and basing on this you are deciding what to do with the box.