ボタンを押したらお知らせを閉じたい、条件に合う項目だけ隠したいと思っても、「hide()をどこへ書くの？」「隠したら下の要素が動くのはなぜ？」と迷うことがありますよね。
jQueryのhide()は、選択した要素を非表示にするメソッドです。引数なしならすぐに隠れ、時間を指定すると幅・高さ・透明度を変化させながら隠れます。
$('#hide-button').on('click', function () {
$('#notice').hide();
});この記事では、お知らせを閉じる基本例、表示時間と完了後の処理、show()・toggle()との違い、完了済み項目だけを隠す実用例、効かないときの確認方法まで解説します。
jQueryのhide()とは
hide()は、指定した要素をCSSのdisplay: none;に近い状態へ変えて非表示にします。要素が見えなくなるだけでなく、レイアウト上で使っていた場所もなくなります。
次の図では、中央の要素を隠したあと、下の要素が上へ詰まることを確認できます。
下の要素を動かしたくない場合は、非表示にする要素と同じ高さの親要素を用意する方法があります。ただし、不要な空白が残るため、本当に場所を残す必要があるかを先に考えましょう。
hide()の基本構文
$('隠したい要素').hide();引数を省略すると、要素はすぐに隠れます。時間を指定した場合はアニメーションになり、指定時間をかけて幅・高さ・透明度が0へ変化したあと、display: none;になります。
$('#notice').hide(600); // 0.6秒かけて隠す| 書き方 | 動き | 使う場面 |
|---|---|---|
.hide() | すぐに隠す | 一覧の絞り込み |
.hide(600) | 0.6秒かけて隠す | 変化を見せたい通知 |
.hide(600, callback) | 隠れたあとに関数を実行 | 完了後に状態を更新 |
閉じるボタンでお知らせを隠す
最初に、メンテナンスのお知らせを閉じる例を作ります。変更前は、次のようにお知らせと閉じるボタンが表示されています。
閉じるボタンを押すと、お知らせが隠れ、下に置いた状態メッセージが上へ詰まります。
HTMLでお知らせと状態欄を作る
index.htmlへ、お知らせ、閉じるボタン、操作結果を伝える状態欄を記述します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hideの基本例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="demo">
<p class="demo__label">hide() の基本</p>
<h1>不要なお知らせを隠します</h1>
<p class="lead">
閉じるボタンを押すと、お知らせがレイアウトから取り除かれます。
</p>
<section id="notice" class="notice">
<div>
<strong>メンテナンスのお知らせ</strong>
<p>明日の午前2時から、一時的にサービスを停止します。</p>
</div>
<button id="hide-button" type="button">閉じる</button>
</section>
<p id="status" class="status" tabindex="-1" aria-live="polite"></p>
</main>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>aria-live="polite"は、状態欄の文章が変わったことを支援技術へ伝える指定です。tabindex="-1"を付けると、JavaScriptからフォーカスを移せます。
CSSでお知らせを整える
style.cssでは、お知らせの文章とボタンを横並びにします。スマートフォンでは縦並びになるように調整します。
.notice {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
padding: 28px;
border-left: 6px solid #e44857;
border-radius: 18px;
background: #fff1f3;
}
.notice strong {
display: block;
margin-bottom: 8px;
font-size: 22px;
}
.notice p {
margin: 0;
color: #6c4050;
line-height: 1.7;
}
@media (max-width: 640px) {
.notice {
grid-template-columns: 1fr;
}
}クリック時にhide()を実行する
script.jsでは、お知らせを隠したあとに状態欄を更新します。閉じるボタン自体も隠れるため、次に読むべき状態欄へフォーカスを移しています。
$('#hide-button').on('click', function () {
$('#notice').hide();
$('#status')
.text('お知らせを非表示にしました。')
.trigger('focus');
});ページ下部でjQuery本体、script.jsの順に読み込めば、HTML要素が作られたあとにイベントを設定できます。
時間と完了後の処理を指定する
時間をかけて隠す場合は、第1引数へミリ秒を指定します。第2引数のコールバック関数は、要素が完全に隠れたあとに実行されます。
$('#hide-button').on('click', function () {
$('#notice').hide(600, function () {
$('#status').text('お知らせを非表示にしました。');
});
});600は0.6秒です。文字列の'fast'は200ミリ秒、'slow'は600ミリ秒ですが、数値で書くほうが時間を把握しやすくなります。
同じ操作を連続で行う可能性がある場合は、.stop(true, true)で待機中のアニメーションを削除してから実行します。
$('#notice').stop(true, true).hide(600);hide()・show()・toggle()の使い分け
| メソッド | 動き | 例 |
|---|---|---|
hide() | 表示中の要素を隠す | 通知を閉じる |
show() | 非表示の要素を表示する | 隠した一覧を戻す |
toggle() | 表示と非表示を切り替える | 同じボタンで開閉する |
show()は、hide()が保存した元のdisplay値を復元します。元がinlineだった要素は、再表示後もinlineへ戻ります。
$('#hide-button').on('click', function () {
$('#panel').hide();
});
$('#show-button').on('click', function () {
$('#panel').show();
});1つのボタンで切り替えるならtoggle()を使えます。開閉する部品では、現在の状態をaria-expandedにも反映してください。
$('#toggle-button').on('click', function () {
const willOpen = $('#panel').is(':hidden');
$('#panel').toggle();
$(this).attr('aria-expanded', String(willOpen));
});完了した項目だけを隠す実用例
hide()は、条件に合う要素だけを一覧から隠す場合にも使えます。次の例では、.is-completeが付いた完了済みタスク2件を非表示にしています。
HTMLでタスク一覧を作る
完了した項目にはis-completeクラスを付けます。状態を見た目だけで判断せず、文章でも「完了」と示します。
<div class="actions">
<button id="hide-complete" type="button">完了を隠す</button>
<button id="show-all" class="secondary" type="button">
すべて表示
</button>
</div>
<ul class="task-list">
<li class="task is-complete">
<span class="task__mark">✓</span>
<strong class="task__name">写真を用意する</strong>
<span class="task__state">完了</span>
</li>
<li class="task">
<span class="task__mark">2</span>
<strong class="task__name">本文を確認する</strong>
<span class="task__state">作業中</span>
</li>
<li class="task is-complete">
<span class="task__mark">✓</span>
<strong class="task__name">リンクを確認する</strong>
<span class="task__state">完了</span>
</li>
<li class="task">
<span class="task__mark">4</span>
<strong class="task__name">公開する</strong>
<span class="task__state">未着手</span>
</li>
</ul>
<p id="filter-status" class="status" aria-live="polite"></p>CSSで一覧を整える
.task-list {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.task {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: center;
padding: 20px 22px;
border: 1px solid #dde5f1;
border-radius: 16px;
background: #fff;
}
.task.is-complete .task__name {
color: #6c768b;
text-decoration: line-through;
}完了項目を隠して元に戻す
「完了を隠す」では.task.is-completeだけを選択します。「すべて表示」では全タスクをshow()で戻します。
$('#hide-complete').on('click', function () {
$('.task.is-complete').hide();
$('#filter-status').text('完了した2件を非表示にしました。');
});
$('#show-all').on('click', function () {
$('.task').show();
$('#filter-status').text('すべてのタスクを表示しました。');
});状態が変わるアプリでは、固定文の「2件」ではなく、対象要素の数を取得すると正確です。
const $completedTasks = $('.task.is-complete');
const completedCount = $completedTasks.length;
$completedTasks.hide();
$('#filter-status').text(
`完了した${completedCount}件を非表示にしました。`
);hide()とvisibility・opacityの違い
| 方法 | 見た目 | 場所 | 操作 |
|---|---|---|---|
hide() / display: none | 見えない | 残らない | できない |
visibility: hidden | 見えない | 残る | できない |
opacity: 0 | 透明 | 残る | 初期状態ではできる |
透明にするだけのopacity: 0;は、見えないボタンやリンクを操作できる状態が残ることがあります。操作させない目的なら、hide()やhidden属性のほうが意図に合います。
アニメーションが不要で、単純な状態管理として隠す場合はHTMLのhidden属性も使えます。
$('#notice').prop('hidden', true);hide()が効かないときの確認ポイント
セレクタがHTMLと一致していない
#noticeはid="notice"、.noticeはclass="notice"を選びます。記号やハイフンまで一致しているか確認してください。
jQueryの読み込み順が逆になっている
jQuery本体より先にscript.jsを読み込むと、$ is not definedエラーになります。HTMLの末尾で、jQuery本体、自分のJavaScriptの順に記述します。
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>あとから追加した要素にイベントが付いていない
ページ表示後に追加する閉じるボタンには、すでに存在する親要素からイベント委譲します。thisに近い通知だけを隠すと、ほかの通知へ影響しません。
$('#notice-list').on('click', '.hide-button', function () {
$(this).closest('.notice').hide();
});display: none !importantがshow()を妨げている
CSSにdisplay: none !important;があると、show()で元へ戻せません。状態を表すクラスを追加・削除する設計へ変更し、!importantへ頼らないようにします。
slim版で時間指定を使っている
引数なしのhide()はslim版でも使えますが、slim版にはeffectsモジュールが含まれません。hide(600)のようなアニメーションが必要なら、URLにslimがない通常版を使います。
hide()についてよくある質問
隠した要素をもう一度表示できますか？
show()で表示できます。ふわっと表示したい場合はfadeIn()を使います。
hide()で要素は削除されますか？
削除されません。HTML要素はDOMに残り、非表示になります。要素自体を削除したい場合はremove()を使います。
画像だけを隠すこともできますか？
できます。画像へ付けたidやクラスをセレクタへ指定します。すべての画像を選ぶ$('img')では、ロゴやアイコンまで隠れるため、対象を絞りましょう。
$('#product-photo').hide();まとめ
jQueryのhide()は、選択した要素を非表示にするメソッドです。引数なしならすぐに隠れ、時間を指定すると幅・高さ・透明度を変化させてからdisplay: none;になります。
隠した要素の場所もなくなるため、下の要素が詰まる点を理解して使いましょう。再表示にはshow()、切り替えにはtoggle()を使い、閉じるボタン自体が消える場合は次の操作先や状態も分かるようにすると親切です。