続きを読むでアコーディオンが開くjQuery・CSSの記述方法

お知らせやQ&Aなどで、途中までの文章を表示しておいて「続きを読む」ボタンでアコーディオンが開いて全体を表示させたい時があります。そんな時は、ちょっとしたjsとcssで実現できますのでやってみましょう。

HTMLを記述する

サンプル文として「人間失格」の一説を記述しました。

<div class="acbox">
	<p>恥の多い生涯を送って来ました。
		自分には、人間の生活というものが、見当つかないのです。
		自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。
		自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、
		ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。
		しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、
		ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、
		のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。</p>

	<div class="hide_area">
		<p>また、自分は子供の頃、絵本で地下鉄道というものを見て、これもやはり、実利的な必要から案出せられたものではなく、
			地上の車に乗るよりは、地下の車に乗ったほうが風がわりで面白い遊びだから、とばかり思っていました。
			恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。
			自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、
			そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、
			複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。</p>
	</div>
	<button class="readmore"><span class="open">続きを読む</span><span class="close">閉じる</span></button>
</div>

<p>恥の多い生涯を送って来ました。

自分には、人間の生活というものが、見当つかないのです。

自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、

ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。

しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、

ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、

のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。</p>

<p>また、自分は子供の頃、絵本で地下鉄道というものを見て、これもやはり、実利的な必要から案出せられたものではなく、

地上の車に乗るよりは、地下の車に乗ったほうが風がわりで面白い遊びだから、とばかり思っていました。

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。

自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、

そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、

複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。</p>

</div>

<button class="readmore"><span class="open">続きを読む</span><span class="close">閉じる</span></button>

</div>

はじめから表示しておく部分を「.acbox p」内に記述しておき、隠しておく部分をその子要素「.hide_area p」に記述しておきます。

その下に、アコーディオンを表示・非表示を切り替えるボタンを「button class=”readmore”」で配置しています。

CSSを記述

.readmore {
    position: relative;
    margin: 2em auto;
    display: block;
    color: #5a5a5a;
    border: none;
    outline: 0;
    cursor: pointer;
    background: none;
    letter-spacing: 0.1em;
	font-size: 12px;
}
.readmore:before {
  content: "";
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 50%;
  display: block;
  margin: 0 auto .5em;
  background: url(../images/arrow.png) no-repeat center / 28px #fff;
  transition: .3s;
}
.readmore.on-click:before {
  transform: rotate(180deg);
}
.readmore .open {
  display: block;
}
.readmore.on-click .open {
  display: none;
}
.readmore .close {
	display: none;
}
.readmore.on-click .close {
	display: block;
}

.readmore {

position: relative;

margin: 2em auto;

display: block;

color: #5a5a5a;

border: none;

outline: 0;

cursor: pointer;

background: none;

letter-spacing: 0.1em;

font-size: 12px;

}

.readmore:before {

content: "";

width: 60px;

height: 60px;

text-align: center;

border-radius: 50%;

display: block;

margin: 0 auto .5em;

background: url(../images/arrow.png) no-repeat center / 28px #fff;

transition: .3s;

}

.readmore.on-click:before {

transform: rotate(180deg);

}

.readmore .open {

display: block;

}

.readmore.on-click .open {

display: none;

}

.readmore .close {

display: none;

}

.readmore.on-click .close {

display: block;

}

CSSでは「続きを読む」ボタンの表示に関する調整をしています。ボタンクリックで「on-click」というクラスが付与するようにし「続きを読む」という表示を非表示に、代わりに「閉じる」というテキストを表示するようにしています。

JavaScriptを記述

$('.hide_area').hide();
$(".readmore").on("click", function() {
    $(this).toggleClass("on-click");
    $(this).prev().slideToggle();
});

$('.hide_area').hide();

$(".readmore").on("click", function() {

$(this).toggleClass("on-click");

$(this).prev().slideToggle();

});

bodyタグ直前に、下のように「jQuery」を読み込み、別ファイルで上に記載した「main.js」を読み込むようにしています。

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="js/main.js" charset="utf-8"></script>

1 2	<script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="js/main.js" charset="utf-8"></script>

これで「続きを読む」ボタンで表示・非表示が切り替えられるアコーディオンが完成です。
デモサンプルを確認してみてください。

デモサンプル