Question

I was playing for a long time today, trying to accomplish something without knowledge.
However I have made an JS fiddle with this explanation, so I hope someone can help me.

Let’s get to the point.

I have 4 small boxes. Each box is 15x15px just like in this Fiddle.

<div class="js-fiddleWrap">
    <div id="letterA">Letter A opened-content.</div>
    <div id="letterB">Letter B opened-content.</div>
    <div id="letterC">Letter C opened-content.</div>
    <div id="letterD">Letter D opened-content.</div>
    
    <nav class="collapseMenu">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </nav>
</div>​

On click of one box animation starts and box becomes higher(longer) and gets 45px instead of 15px. It also goes up so it looks like it is rising using this script.

$(document).ready(function() {
    var $collapseMenu = $('.collapseMenu li');

    $collapseMenu.on('click', function() {
        $(this).animate({
            'bottom': '30',
            'height': '45',
        });
    });
});​

Although I made this, I think it’s wrong. After this animation, theres more that I wasn’t able to accomplish.

I have some hidden content just like in fiddle. Example A, B, C and D content.
So each box that is clicked rise up, reveal content and then hides the content if same or different box has been clicked.

Also I wasn’t able to create minimize back effect. Mean if same box is clicked again once it has risen up and revealed content, it will go back to default position. As well, same thing will happened if different box is clicked. It will hide previously opened box and minimize it.

The Fiddle

Answer 1

Try this jsFiddle example

jQuery

var $collapseMenu = $('.collapseMenu li');
$collapseMenu.on('click', function() {
    $collapseMenu.stop(true,true).animate({
        'bottom': '0',
        'height': '15'
    });
    if($(this).height() != 45 ) $(this).stop(true,true).animate({
        'bottom': '30',
        'height': '45'
    });
});​