1

画面の片側からボックスをスライドさせて、1 つのボタンをクリックして約 200px に落ち着かせようとしています。次に、ボタンをもう一度クリックすると、非表示にスライドして戻ります。私はサイト全体を繰り返し見ましたが、コードが機能していないか、スライドしないなどの望ましい効果が得られませんでした。これは以下に示す私のコードです:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="style/main.css" />
<script src="style/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script>
    $("#box_button").click(function(){
        if(!$("#hiddenBox").show()) {
            $("#hiddenBox").show()
        } else {
            $("#hiddenBox").hide();
        }
    });
</script>
</head>

<body>
    <div id="container">
        <div id="masterDiv">
            <div id="tab">
                <button id="box_button">Slide</button>
            </div>
            <div id="hiddenBox">
                <p>Just trying to work here.</p>
            </div>
        </nav>
    </div>
</body>
</html>

「box_button」の ID を持つボタンをクリックすると、「hiddenBox」を左にスライドして表示するか、右にスライドして表示から外したいと考えています。複数のボタンを異なるボックスにスライドさせて、前のボックスを非表示にしたいと考えています。どうすればこれを達成できますか?

4

1 に答える 1