【たった6行！】続きを読むボタンで要素を開いたり閉じたりするjQuery・CSSのデザイン作りましたので公開します【webデザイン】

こんちゃっす。菱川と言います。都内でwebでざいんやってます。

サイトとか徘徊してると「続きを読む」みたいなボタンがあってクリックとかタップすると続きが表示されるやつをよく見かけるかと思います。

今回はそれを作ったので僕自身もすぐに引用できるように備忘録として記録しておきます。

 

まずはデモサイトをみてみましょう↓

 

デモサイト

 

「read more」のボタンが矢印の形になっていて、クリックするとテキストが現れると同時に矢印が回転しread moreの文字が消えるというものです。結構オシャレでしょ〜！！！(デモサイトなのでウインドウサイズによって動作中に段落が変わっちゃったりしますがあまり気にしないでください。)

では早速コードを公開したいと思います。

 

html

<div id="text-wrap">

<div class="show-text">

吾輩は猫である。名前はまだ無い。
どこで生れたか頓（とん）と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
吾輩はこゝで始めて人間といふものを見た。然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。

		</div>


<div class="hide-text">

此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。
然し其當時は何といふ考（かんがへ）もなかつたから別段恐しいとも思はなかつた。
但（たゞ）彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許（ばか）りである。
掌の上で少し落ち付いて書生の顔を見たのが所謂（いはゆる）人間といふものゝ見始（みはじめ）であらう。
此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐（やくわん）だ。其後猫にも大分逢つたがこんな片輪には一度も出會（でく）はした事がない。
加之（のみならず）顔の眞中が餘りに突起して居る。そうして其穴の中から時々ぷうぷうと烟（けむり）を吹く。
どうも咽（む）せぽくて實に弱つた。是が人間の飲む烟草（たばこ）といふものである事は漸く此頃（このごろ）知つた。

		</div>

		<button class="readmore">READ MORE</button>
</div>

解説

headにjQueryを読み込んでいることを前提に書いているのでその辺は省略してます。

クラス「show-text」が常に表示される部分で「hide-text」が隠れる要素になります。buttonで押下するとhide-textが出てくる為にjQueryで処理します。後術。

 

 

CSS

 

p {
	text-align: center;
	font-size: 16px;
	color: #666;
	line-height: 2.5;
	margin: 0;
}

#text-wrap {
	width: 50%;
	height: 100%;
	display: block;
	margin: 0 auto;
	padding: 70px;
}

.hide-text {
	display: none;
}


button.readmore {
	position: relative;
	height: 80px;
	width: 90px;
	margin: 40px auto;
	display: block;
	background-color: transparent;
	color: #666;
	padding-bottom: 40px;
	border: none;
	outline: 0;
	transition: .5s;
	-erbkit-transition: .5s;
}

button.readmore::after {
	content: " ";
	position: absolute;
	width: 30px;
	height: 30px;
	border-top: solid 3px #666;
	border-right: solid 3px #666;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	right: 28px;
	top: 25px;
	transition: .5s;
	-erbkit-transition: .5s;
}

button.readmore:hover::after {
	top: 40px;
}

.on-click {
	color: transparent!important;
}

.on-click {
	transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
}

解説

pタグはご自由に。「on-click」というクラスはjQueryで使います。hide-textはdisplay: noneにし、ボタンは擬似要素を使って矢印のような形にします。

 

jQuery

 

jQueryというととっつきにくいと言う方もいるかもしれませんが、めちゃ簡単です。

$(function(){
	$(".readmore").on("click", function() {
		$(this).toggleClass("on-click");
		$(".hide-text").slideToggle(1000);
	});
}); 

たったの6行でしまいです。

解説

 

ボタン「.readmore」をクリックするとトグルクラスで「on-click」をオンオフ切り替えます。これでボタンにアニメーションがついて、スライドトグルで実際にhide-textが表示されると言う仕組みです。

 

 

ここでもう一度サンプルを見てみます。

 

デモサイト

 

なかなかシンプルでかっちょいいデザインなのでいろんな業種のwebにぴったりだと思います。

 

まとめ

 

いかがでしたでしょうか。jQueryを使うとなると毛嫌いする方も多いのですけど6行だけだったら書けるかな！って気持ちにもなるのではないでしょうか。今でもreadmoreを使うことはよくありますのでご活用していただければと思います。

ちなみにボタンのデザインはCSS触れる人ならどんなデザインにでもできるので色々こねくり回して見てください。

 

それでは！