Pull down panel - Simplified - Works

by karlgo

HTML

<div id="topPanel">
    <div id="settingsPanel">
        Settings Panel<br>
        Testing
    </div> <!-- panel -->
    <div class="panelTab">
        <span id="toggle">&nbsp;
            <a id="open" class="open" href="#">Settings</a>
            <a id="close" style="display: none;" class="close" href="#">Close Settings</a>
            &nbsp;
        </span>
    </div> <!-- panel tab -->
</div> <!-- topPanel -->
<div id="content">
    This is page content
</div>

CSS

#topPanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#settingsPanel {
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 100%
    height: 350px;
    display: none;
    background: grey;
}

.panelTab {
    height: 52px;
    position relative;
    top: 0;
    left: 25;
    z-index: 999;
}

#toggle {
    background-color:tan;
}

JavaScript

$(document).ready(function() {
	
	// Expand Panel
	$("#open").click(function(){
		$("div#settingsPanel").slideDown("slow");
	});	
	
	// Collapse Panel
	$("#close").click(function(){
		$("div#settingsPanel").slideUp("slow");	
	});		
	
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		
		
});