jQueryだけで作れる簡単UIレシピ集【初心者向け・コピペOK】

jQueryレシピ集(コードあり)

① アコーディオンメニュー（FAQなど）

<div class="accordion">
<h3 class="title">Q1. 質問です</h3>
<div class="content">A1. これが答えです。</div>
</div>

$(".accordion .title").click(function() {
$(this).next(".content").slideToggle();
});

よくあるQ&Aやメニューで活躍！

② モーダルウィンドウ（ポップアップ）

<a href="#" class="open-modal">開く</a>

<div class="modal" style="display:none;">
<div class="modal-content">
<p>モーダルの中身です</p>
<button class="close-modal">閉じる</button>
</div>
</div>

$(".open-modal").click(function(){
$(".modal").fadeIn();
});
$(".close-modal").click(function(){
$(".modal").fadeOut();
});

お知らせ、画像拡大、フォームなどに！

③ トップへ戻るボタン

<a href="#" class="pagetop">▲ 上へ戻る</a>

$(".pagetop").click(function(e){
e.preventDefault();
$("html, body").animate({ scrollTop: 0 }, 500);
});

長いページには必須の便利UI！

④ タブ切り替え（カテゴリ分けやフォーム切り替え）

<ul class="tabs">
<li class="active" data-tab="tab1">Tab 1</li>
<li data-tab="tab2">Tab 2</li>
</ul>

<div class="tab-content" id="tab1">タブ1の内容</div>
<div class="tab-content" id="tab2" style="display:none;">タブ2の内容</div>

$(".tabs li").click(function() {
var tab_id = $(this).data("tab");

$(".tabs li").removeClass("active");
$(".tab-content").hide();

$(this).addClass("active");
$("#" + tab_id).show();
});

管理画面・商品ページなどでよく使います。

⑤ フェードインスライダー（簡易版）

<div class="slider">
<img src="img1.jpg" class="active">
<img src="img2.jpg">
<img src="img3.jpg">
</div>

setInterval(function() {
var $active = $(".slider img.active");
var $next = $active.next("img").length ? $active.next("img") : $(".slider img:first");

$active.fadeOut(500).removeClass("active");
$next.fadeIn(500).addClass("active");
}, 3000);

画像バナーのスライドにぴったり！

⑥ スムーススクロール（ページ内リンク）

<a href="#section2">ここへ移動</a>

<div id="section2">目的のエリア</div>

$('a[href^="#"]').click(function(e){
e.preventDefault();
var target = $($(this).attr("href"));
if(target.length){
$("html, body").animate({
scrollTop: target.offset().top
}, 500);
}
});

ページ内ジャンプがなめらかに！

⑦ 画像ホバーで切り替え

<img src="img1.jpg" data-hover="img2.jpg" class="hover-img">

$(".hover-img").hover(function(){
let original = $(this).attr("src");
let hover = $(this).data("hover");
$(this).attr("src", hover);
}, function(){
let original = $(this).data("hover");
$(this).attr("src", $(this).attr("data-hover", original));
});

マウスオンで別画像に切り替え。ボタン風に使っても◎

まとめ：jQueryで簡単に「動くUI」を実装！