zerofx,
вас конкретно спросили ...
смена названия кнопки закрыть/открыть - блок при открытии выдвигается - клик по меню обязательно предварительно закроет блок если он открыт ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
#menu ul{list-style:none}
#menu li{float:left;margin:0 25px 0 0}
#menu a{padding:5px;font:18px 'Verdana';color:#F00;text-decoration:none}
#menu a:hover{padding:5px;border-bottom:solid 2px red;border-right:solid 2px red;border-left:solid 2px green;border-top:solid 2px green}
#panel{position:absolute;top:50%;left:-400px;margin:-40px 0 0 0;overflow:hidden}
#panel-content{background:#EEE;border:1px solid #CCC;width:388px;height:80px;float:left;padding:3px 5px}
#panel-sticker{float:left;position:relative;background:#FFA500;padding:3px 20px 3px 5px;margin:0;cursor:pointer}
#panel-sticker .close{position:absolute;right:3px;top:3px}
</style>
<script type='text/javascript'>
(function ($) {
$(document).ready(function () {
var $panel = $('#panel');
if ($panel.length) {
var $sticker = $panel.children('#panel-sticker');
var showPanel = function () {
$panel.animate({
left: '+=400'
}, 900, function () {
$(this).addClass('visible');
});
};
var hidePanel = function (href) {
$panel.animate({
left: '-=400'
}, 900, function () {
$(this).removeClass('visible');
href && (window.location = href)
});
};
showPanel();
$("#menu a").click(function (event) {
if ($panel.hasClass('visible')) {
event.preventDefault();
hidePanel(this.href)
}
})
$sticker
.children('span').click(function () {
if ($panel.hasClass('visible')) {
hidePanel();
$(this).text('Открыть')
} else {
showPanel();
$(this).text('Закрыть')
}
}).andSelf()
.children('.close').click(function () {
$panel.remove();
});
}
});
})(jQuery);
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="http://javascript.ru/forum">Тест1</a></li>
<li><a href="http://javascript.ru">Тест2</a></li>
</ul>
</div>
<div id="panel">
<div id="panel-content">
Какой-то контент, который вы хотите показать.<br/>
Несколько строк<br/>
для наглядности
</div>
<div id="panel-sticker">
<span>Закрыть</span>
<div class="close">×</div>
</div>
</div>
</body>
</html>