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

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

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

html,CSS,Javascript(JQuery)を使って、ボタンを押したら要素を表示/非表示させる方法を解説します。

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

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を指定します。

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で実現可能ですので挑戦してみましょう。

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