bootstrap - oldtown

by apasaja

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<div class="fran">
    <div class="franleft">
        <div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Initial Application</a>
              </div>
              <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div class="franbut">Submission</div>
                    <div class="franbut">Business Plan</div>
                    <div class="franbut">Interview</div>
                    <div class="franbut">Letter of Intend</div>
                    <div class="franbut">Territory Visit</div>
                </div>
              </div>
            </div>
        
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Pre-appointment</a>
              </div>
              <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="franbut">Arrangement</div>
                    <div class="franbut">Territory Field Visit</div>
                    <div class="franbut">Successful Visit</div>
                    <div class="franbut">Signing Agreement</div>
                    <div class="franbut">Initial Opening Schedule</div>
                </div>
              </div>
            </div>
        
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Initial Opening</a>
              </div>
              <div id="collapseThree" class="accordion-body collapse">
        ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
a, a:hover {
    text-decoration: none;
}
.franbut {
    height: 50px;
}
.franleft {
    width: 200px;
    float: left;
}
.franright {
    width:60%;
    padding-left: 10px;
    float: left;
}
#fransect {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 350px;
    height: 100%;
    overflow: hidden;  
}

.box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 50px;
    margin-left: -25%;
}



#box1 {
    background-color: green;
    left: 50%;
}

#box2 {
    background-color: yellow;
}

#box3 {
    background-color: red;
}

#box4 {
    background-color: orange;
}

#box5 {
    background-color: blue;
}

JavaScript

$('.box').click(function() {

    $(this).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#fransect');
    });

    $(this).next().animate({
        left: '-50%'
    }, 500);
});