【jQuery】下へスライド

<下へスライド>ボタンをクリックすると、ゆっくりスライドする処理を書いてみました

まずは JSFIDDEL を利用して、使いたい jQuery を書いてみる

初めてのjQuery

下へスライド

-----------------------------------------------------------------
①jQuery を使用するために、テンプレートに jQuery を組み込む

1.テンプレートで、HTMLの編集を行う

テンプレート

2.「template-skin」をキーワードに検索を行い、「</head>」の直前に、「<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>」を組み込む

HTML編集

②記事をHTMLで作成する

【jQuery】
<script type="text/javascript">
$(document).ready(function(){
 $(".slideDown_btn").click(function(){
        $("#panel").slideDown("slow");
 });
});
</script>

【CSS】
<style type="text/css">
#panel {
 background: #c8b0e8;
 height: 100px;
 display: none;
}
.btn:hover{
 cursor:pointer;
}
</style>

【HTML】
<div id="panel">
初めてのjQuery</div>
<div class="slideDown_btn btn">
下へスライド</div>