ariela/gist:1013592

## gistfile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <title>★文書タイトル★</title>

    <style>
    /**
     * スライドして表示される場所
     */
    #slidedown {
        /* 色設定 */
        color: #fff;
        background: rgba(0,0,0,0.8);
        /* ブロック設定 */
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        /* 初期非表示 */
        display: none;
    }

    /**
     * スライドを閉じるボタン
     */
    #slideclose {
        /* ブロック設定 */
        margin: 0;
        padding: 0;
        position: absolute;
        top:      10px;
        right:    10px;
    }
    </style>

    <script>
    $(function() {
        // 読み込み時に実行される

        var speed = 300; // ミリ秒

        // スライドを切り替える箇所をクリックした場合
        $('#slidetoggle').click(function() {
            $('#slidedown').slideToggle(speed, handlerSlided);
        });

        // スライドを閉じるボタンをクリックした場合
        $('#slideclose').click(function() {
            $('#slidedown').slideUp(speed, handlerSlided);
        });

    });

    /**
     * スライド処理の終了後処理
     */
    function handlerSlided() {
        if ($(this).css('display') == 'block') {
            $('#slidetoggle').text('close');
        } else {
            $('#slidetoggle').text('open');
        }
    }
    </script>

</head>
<body>

    <header>
        <h1>test</h1>
        <a href="#" id="slidetoggle">open</a>
    </header>

    <div id="slidedown">
        <p id="slideclose">×</p>
        <h1>slides</h1>
    </div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<title>★文書タイトル★</title>

	<style>
	/**
	* スライドして表示される場所
	*/
	#slidedown {
	/* 色設定 */
	color: #fff;
	background: rgba(0,0,0,0.8);
	/* ブロック設定 */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* 初期非表示 */
	display: none;
	}

	/**
	* スライドを閉じるボタン
	*/
	#slideclose {
	/* ブロック設定 */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 10px;
	right: 10px;
	}
	</style>

	<script>
	$(function() {
	// 読み込み時に実行される

	var speed = 300; // ミリ秒

	// スライドを切り替える箇所をクリックした場合
	$('#slidetoggle').click(function() {
	$('#slidedown').slideToggle(speed, handlerSlided);
	});

	// スライドを閉じるボタンをクリックした場合
	$('#slideclose').click(function() {
	$('#slidedown').slideUp(speed, handlerSlided);
	});

	});

	/**
	* スライド処理の終了後処理
	*/
	function handlerSlided() {
	if ($(this).css('display') == 'block') {
	$('#slidetoggle').text('close');
	} else {
	$('#slidetoggle').text('open');
	}
	}
	</script>

	</head>
	<body>

	<header>
	<h1>test</h1>
	<a href="#" id="slidetoggle">open</a>
	</header>

	<div id="slidedown">
	<p id="slideclose">×</p>
	<h1>slides</h1>
	</div>

	</body>
	</html>