jQuery最小化和最大化HTML Div

Question

Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox . In leftFilterBox, there is another div to wrap all the contents named filterContent . So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:

<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions

<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
    <img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>

<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>

</div>

And my CSS:

#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
    width: 28px;
    height: 28px;
    cursor: pointer;
}

And my JavaScript:

function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
    $('#leftFilterBox').css('height', '65%');
    $('#leftFilterBox').css('top', '30%');
}

Here is my jsFiddle link: Fiddle

Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.

Thanks in advance.

Answer 1

Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.

Updated fiddle demo

$('#minimize').click(function(){
    minimizeFilterWindow();
});

$('#maximize').click(function(){
    maximizeFilterWindow();
});

function minimizeFilterWindow() {
    $('#leftFilterBox').css('height', '25px');
    $('#leftFilterBox').css('top', '90%');
} 

function maximizeFilterWindow() {
    $('#leftFilterBox').css('height', '65%');
    $('#leftFilterBox').css('top', '30%');
    $('#leftFilterBox').css('background-color', '#000');
}

And, the updated HTML

<div id='leftFilterBox'>
    <div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
        <div id='filterWindowNav'>
            <img id='minimize' src='img/minimizeFilterWindow.png'  />
            <img id='maximize' src='img/maximizeFilterWindow.png'  />
            <img id='close' alt='close' src='img/closeFilterWindow.png' />
        </div>
    </div>
    <br/>
    <div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
        <hr width='85%' />
    </div>
</div>