I need help in creating 4 collapsible panels using jquery

Question

I am completely new to the jquery scene, and so am having some trouble trying to figure this out. My problem is:
I am creating a website for a project, and this website is based of a square (700px by 700px) that has been divided into 4 smaller squares - all 350px by 350px. What I want to do is have each of these smaller squares have a panel covering them, that when clicked, move away to reveal the content behind them. The two panels on the left side would slide to the left and disappear, and the two on the right would slide to the right and disappear.
If possible I would like only one panel to disappear at a time. So as one would click a new panel, the previous one would slid back into position, hiding its content again.

Any help would be greatly appreciated!

Answer 1

There are many ways to do the sort of thing you're interested in. CSS transitions have already been mentioned. I've included a working example but it is very basic - it should get you moving in the right direction. Please take a look at the links below - they've got a lot of great information.

If you have four elements, and the main function of the covers is just to cover, you could use :after (or :before) CSS pseudo-elements. Here's what that HTML markup could look like if your panels were li elements:

<ul>
    <li id="panelOne">One</li>
    <li id="panelTwo">Two</li>
    <li id="panelThree">Three</li>
    <li id="panelFour">Four</li>
</ul>

Since the covers are only there to hide your four panels and they're pseudo-elements, you'd style them in your CSS. You could start by styling your HTML elements:

ul {
    display: block;
    background: black;
    width: 700px;
    height: 700px;
    margin: 0 auto;
}
li {
    float: left;
    position: relative;
    background: white;
    border: 1px solid black;
    width: 350px;
    height: 350px;
}

Then style your :after covers:

li:after {
    display: block;
    /*the background color is just to make the covers more visible */
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 350px;
    content: "";
}

If you use jQuery to add a class (for example, ".clicked") to one panel at a time, you'd style the .clicked pseudo-elements so they move to the left or right:

li#panelOne.clicked:after, li#panelThree.clicked:after {
  -webkit-transform: translateX(-350px);
  -moz-transform:    translateX(-350px);
  -ms-transform:     translateX(-350px);
  -o-transform:      translateX(-350px);
  transform:         translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
  -webkit-transform: translateX(350px);
  -moz-transform:    translateX(350px);
  -ms-transform:     translateX(350px);
  -o-transform:      translateX(350px);
  transform:         translateX(350px);
}

And use jQuery to add or remove the class:

$( 'li' ).click(function(){
    //first remove the class from ALL panels
    $( 'li' ).removeClass( 'clicked' );
    //then add to the panel that's been clicked
    $(this).addClass( 'clicked' );
});

And one more step: since you want the covers to slide to the left or right, you'll need to add CSS transitions to achieve that. You'd place them in your :after pseudo-element styles:

-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;

And here's how that would all look in a jsfiddle: http://jsfiddle.net/rt9d5/10/embedded/result/

Answer 2

Try using the Jquery UI Accordion http://jqueryui.com/accordion

You can create multiple collapsible panels and set whether it to have one panel open at a time (or multiple if you want).

My Suggestion would be to look at this, do a little research, and if you have any more questions post a more specific question on stackoverflow.