ホームへ

【html/CSS】ボタンを押したら要素を表示/非表示させる方法

2022年06月13日

「ボタンをクリックしたらスマホメニューを表示させたい」

「文量が多いしそこまで重要じゃないから隠しておいてクリックしたら表示したい」

ボタンを押したら要素を表示/非表示させる方法を解説します。

ボタンの色を変えるならこちら↓

jQueryで表示/非表示

jQueryで要素にclassを付与します。そのクラスにdisplay:noneを指定することで表示/非表示にします。

下記「ボタン」を押すとその下のオレンジ部分が表示・非表示されます。

ボタン
これが表示/非表示
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $(".A").click(function() {
        $(".B").toggleClass("C");
    });
});
</script>
<style>
.A{
    display: inline-block;
    background: #b6beff;
    padding: 5px 10px;
    cursor: pointer;
}
.B{
    background: #ffaf74;
    height: 100px;
}
.C{
    display: none;
}
</style>
<div class="A">ボタン</div>
<div class="B">これが表示/非表示</div>

「class="A"」をクリックすると「class="B"」に「class="C"」が追加されます。

「class="C"」には「display:none」を指定しているため要素が非表示になります。

「.toggleClass("")」はクラスをつけたり消したりします。

もう一度「class="A"」をクリックすると「class="B"」から「class="C"」が削除されます。

すると「display:none」がなくなり、表示されるようになります。

jQueryでクラスを付与する詳しい方法は下記記事をご覧ください。

初めは非表示にして、ボタンをクリックしたら表示させたい場合は、最初は「display:none」を指定しておき、付与するclassのほうに「display:block」などnone以外のdisplayを指定します。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

jQueryで折り畳み

基本的には先述の方法と同じです。パッと消えるのではなく、アニメーションしながら伸び縮みします。

toggleClassではなく「slideToggle」を指定します。

下記「ボタン」を押すとその下のオレンジ部分が折りたたまれます。

ボタン
これが表示/非表示
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $(".D").click(function() {
        $(".E").slideToggle("");
    });
});
</script>
<style>
.D{
    display: inline-block;
    background: #b6beff;
    padding: 5px 10px;
    cursor: pointer;
}
.E{
    background: #ffaf74;
    height: 100px;
}
</style>
<div class="D">ボタン</div>
<div class="E">これが表示/非表示</div>

「.slideToggle("")」のように指定し、""の中にはアニメーション時間をミリ秒(1000=1秒)で指定します。

基本的には未指定でも大丈夫でしょう。

初めから非表示にしたい場合は折り畳みで表示される要素に「display:none」を指定します。

表示されるときはjQueryによって「display:block」が付与されます。

flexなどblock以外の値を指定したい場合は、先述したCSSを付与する方法にするか、外側にdivを囲って、それを表示/非表示するといいでしょう。

CSSだけで表示/非表示

labelをクリックするとinputにchecked属性が付与されます。あとはセレクタで非表示にしたい要素に「display:none」を指定します。

下記「ボタン」を押すとその下のオレンジ部分が表示・非表示されます。

これが表示/非表示
<style>
#F{
    display: none;
}
.F{
    display: inline-block;
    background: #b6beff;
    padding: 5px 10px;
    cursor: pointer;
}
.G{
    background: #ffaf74;
    height: 100px;
}
#F:checked+label+.G{
    display: none;
}
</style>
<input type="checkbox" id="F">
<label class="F" for="F">ボタン</label>
<div class="G">これが表示/非表示</div>
  1. inputとlabelをidとforでつなぎます。
  2. inputは「display:none」で消します。
  3. labelをボタンのデザインにします。
  4. labelをクリックするとinputにchecked属性が付きます。そのときのlabelの弟要素は「input:checked+label+*」で指定できます。
    この要素に「display:none」を指定すると非表示にできます。

この方法、jQueryを使わずに実現できますが、デメリットもあります。

  • 本来checkboxはチェックをするための要素で、ボタンのON/OFF判定に使うものではない
  • ボタンより上の要素や親以上の要素とその兄弟要素には指定できない

基本的にはjQueryを使うことをオススメします。

【まとめ】ボタンを押したら要素を表示/非表示させる方法

jQueryで表示/非表示

「.toggleClass("")」でクラスを付与し、そのクラスに「display:none」を指定する

jQueryで折り畳み

「.slideToggle("")」で折りたたむ

CSSだけで表示/非表示

inputのchecked属性を利用し「display:none」を指定する

カンタンなjQueryで実現可能ですので挑戦してみましょう。

以上、ボタンを押したら要素を表示/非表示させる方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ