JQueryを使ったボックスを開く、たたむを表現するアニメーションついて

ボックスを開く、たたむを表現するアニメーションの作成 | Creating an animation that expresses the opening and folding of a box >

ボックスを開く、たたむを表現するアニメーションの作成

HTML <div id=”box”>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>JQuery</li>
<li>PHP</li>
</ul>
</div>
<header>
<div class=”header-contents”>
<div id=”box_btn”>Menu</div>
<h2>ボックスを開く・たたむ | Open / fold the box </h2>
<h4>アニメーション機能を使う | Use the animation function</h4>
</div>
</header>

CSS #box {
display: none;
margin: 0 auto 0 auto;
max-width: 760px;
background-color: bisque;
}
#box ul {
margin: 0;
padding: 0;
list-style: none;
}
#box li {
padding: 8px 0 ;
color: #20567d;
border-bottom: 1px solid #ffffff;
}
.header-contents {
position: relative;
background-color: aquamarine;
}
#box_btn {
position: absolute;
top:0;
right: 0;
border-radius: 0 0 8px 8px;
padding: 6px 20px ;
background-color: rgb(140, 188, 207);
cursor: pointer;
}

JavaScript <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(‘#box_btn’).on(‘click’,function(){
$(‘#box’).slideToggle(‘slow’);
});
});
</script>

JavaScriptが動作しない環境ではボックスが開かれた状態で表示される。| In an environment where JavaScript does not work, the box is displayed in an open state.

HTML
CSS
Javascript
JQuery
PHP

ボックスを開く・たたむ | Open / fold the box

アニメーション機能を使う | Use the animation function

解説

まずは「ボックスが開いた」ときの状態をHTMLとCSSで作成しておきます。次に、CSSでさらに「display: none;」として「ボックスがたたまれた状態」にします。

「 $(‘#box_btn’).on(‘click’,function(){～　」　→　クリックイベントが発生したときに実行されるファンクションを意味します。

「 $(‘#box’).slideToggle(‘slow’);」　→　slideToggleでは取得している要素のボックスが閉じている状態のときは開き、開いているときは閉じます

slideToggle(‘fast’);ではアニメーション速度が速くなり、slideToggle(1000)ではアニメーションにかかる時間をミリ秒で指定できます。

<noscript>～</noscript>:タグについて

今回は上記CSSとは別途設定として下記のようにしているのでJavascriptが動作しない環境ではボックスが開かれた状態で表示されます。

CSS <noscript>
<style>
#box {
display: none;
margin: 0 auto 0 auto;
max-width: 760px;
background-color: bisque;
}
</style>
</noscript>

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。