Question

I’m trying to build a category selector like http://www.facebook.com/pages/create.php

You can find my attempt at http://jsbin.com/uyupom/2/ , but the script is getting messy after 3 clicks.

HTML

  <div id="categories_div">                   
    <div  class="dropbox left">
          <div id="books" class="cat_click is_off">
        Books(click me)
          </div>                        
          <div id="books_input" class="cat_click is_on">
        Some books
          </div>
     </div>

    <div class="dropbox right">
          <div id="movies" class="cat_click is_off">
            Movies (click me)
              </div>
              <div id="movies_input" class="cat_click is_on">
              Some movies
              </div>
        </div>
    </div>

CSS

#categories_div{width:450px;margin:auto;}
.dropbox{height: 110px;width: 220px;background:none #ccc;display: block;overflow:hidden;}
.left{float:left}
.right{float:right}
.cat_click{background:none red;color:#fff;height:110px;}
.is_off{background:none red;color:#fff;height:110px;}

JQUERY

$(document).ready(function() {
$(".cat_click").click(function() {
var $this=$(this);
var id=$this.attr("id");

if($this.hasClass("is_off")){
$(".is_out").slideToggle();
$(".is_out").removeClass("is_out");
$this.slideToggle();

$this.addClass("is_out");
var id2="#" + id + "_input";
$(id2).slideToggle();
}
  });
});

Answer 1

DEMO

var boxH = $('.box').outerHeight(true);  // get box height (+ padds. & margs.)

$('.dropbox').click(function(){
  $('.opened').stop().animate({top:0},500).removeClass('opened'); // if there's opened boxes
  $(this).find('.box').addClass('opened').stop().animate({top: -boxH},500); // now, the clicked one!     
});

If you want a hover action, just change .click to .hover 🙂

HTML ex:

<div id="categories">                   
    <div  class="dropbox">
        <div id="books" class="box">
            <img src="http://img402.imageshack.us/img402/7231/docp.png" alt="Book" />
            <h2>Books</h2>
        </div>                        
        <div id="books_input" class="box desc">
            Some books
        </div>
    </div>
    <!-- ... -->

CSS ex:

body{
    background:#fff;
    font-family:Arial, sans-serif;
}
#categories{
    position:relative;
    margin:0 auto;
    width:557px;height:557px;
}
.dropbox{
    background:#fff;
    position:relative;
    overflow:hidden;
    float:left;
    width:250px;
    height:250px;
    margin:10px;
    border:4px solid #e6e6e6;
}
.box{
    background:#eee;
    position:relative;
    overflow:hidden;
    z-index:2;
    float:left;
    width:200px;
    height:200px;
    margin:5px;
    padding:20px;
    text-align:center;
}
.box img{
    width:128px;
    height:128px;
}
.box h2{
    font-size:34px;
    color:#aaa;
    text-shadow: 1px 2px 2px #fff;
}
.desc{
    text-align:left;
}