studio-benkei

jqueryを使ってコンテンツをスムーズなアニメーションで開閉するスクリプトを紹介します。

こちらをクリックして下さい。▼

• 京都・紅葉
• 京都・清水寺
• 王子動物園
• 六甲山牧場
• 淡路島
• 愛猫写真

こちらをクリックして下さい。▼

• 花と野菜
• 書写山
• 姫路城
• 空
• 花火
• 和田山
• 飛鳥
• 奈良

JavaScript ▼

          $(document).ready(function(){

            $(".slidelist").hide();
          
            $("h4.slide").toggle(function(){
              $(this).addClass("active"); 
              }, function () {
              $(this).removeClass("active");
            });
            
            $("h4.slide").click(function(){
              $(this).next(".slidelist").slideToggle("slow,0.5");
            });	
          });	
          

HTML ▼

           <h4 class="slide">こちらをクリックして下さい。▼</h4>
            <ul class="slidelist">
              <li><a href="#">京都・紅葉</a></li>
              <li><a href="#">京都・清水寺</a></li>
              <li><a href="#">王子動物園</a></li>
              <li><a href="#">六甲山牧場</a></li>
              <li><a href="#">淡路島</a></li>
              <li><a href="#">愛猫写真</a></li>
            </ul>