Home/ Questions/Q 8761891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T15:23:32+00:00

Have been doing a codeacademy course http://www.codecademy.com/ru/courses/javascript-lesson-951/0?curriculum_id=4fc3018f74258b0003001f0f#!/exercises/6 – making a vertical sliding pannel. The

  • 0

Have been doing a codeacademy course http://www.codecademy.com/ru/courses/javascript-lesson-951/0?curriculum_id=4fc3018f74258b0003001f0f#!/exercises/6 – making a vertical sliding pannel.
The problem is that these codeacademy guys didn’t explain how to make the pannel not only slide down, but also slide back up. I tried to do it myself, but didnt achieve anything. Please help.

$(document).ready(function(){
ANIMATION_LENGTH = 400;
$panel = $("#panel");
$tab = $("#tab");
var $isShown;
$tab.click(function($isShown){
    alert($isShown);
    if ($isShown == false)
    {$isShown = true;}
    else if ($isShown == true)
    {$isShown = false;}
    var newTop = $isShown == false ? "-180px" : "0px";
    var lit = {"top": newTop};
    $panel.animate(lit, ANIMATION_LENGTH);
    return $isShown         
});});

CSS

#panel {
    padding: 50px;
    height: 100px;
    width: 500px;
    text-align: center;
    font-size: 24px;
    font-family: Arial;
    font-weight: bold;
    background: #EEE;
    cursor: pointer;
    position:absolute;
    top: -180px;

    -webkit-border-bottom-left-radius: 10px;
}

#tab {
    position:absolute;
    bottom: -25px;
    right: 0px;
    padding: 10px;
    background: #EEE;
    font-size: 16px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}

HTMl

<html>
<head>
    <title>Result</title>
    <link type="text/css" rel="stylesheet" href="panel.css" />
    <script type="text/javascript" src="panel.js"></script>
</head>

<body>
    <div id="panel">
        Awesome hidden sliding pane
        <a href="#panel" id="tab">Click to show</a>
    </div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is how I would approach the problem:

    http://jsfiddle.net/du8z8/3/

    HTML

    <div class="con">
    <div id="tab">Click to Show</div>
    <div id="panel" style="display:none;">
        <p>Awesome hidden sliding pane</p>
        <div id="close">Close</div>
    </div>    
</div>

    JQUERY 

    $("#tab").click(function() {
    $("#tab").toggle();
    $("#panel").slideToggle('slow');
});    

$("#close").click(function() {
    $("#tab").toggle();
    $("#panel").slideToggle('slow');        
});

    CSS

        .con { position:relative; }

    #tab {
        position:absolute;
        top:0px;
        right:20px;
        padding: 10px;
        background: #EEE;
        font-size: 16px;
        text-decoration: none;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        cursor:pointer;
    }

    #close { padding:10px 0 0 0; font-size:0.750em; }

    #panel {
        padding:50px;
        width:100%;
        text-align:center;
        font-size:1em;
        font-family:Arial;
        font-weight:bold;
        background:#EEE;
        cursor:pointer;
        -webkit-border-bottom-left-radius:10px;
    }

​
    • 0