jQueryでシンプルなトグルボタンを実装する

ボタンを押すと上から中身がスライドしてきて表示される、もう一度ボタンを押すと上にスライドしていき中身が非表示にされる、そんなトグルボタンをjQueryで実装してみます。

とても簡単でたった2ステップです。

Contents

①ボタンと中身をHTMLで書く
②jQueryでslideToggleを適応する
ソースコード全文

①ボタンと中身をHTMLで書く

jQueryもCDNで読み込んでおきます。

<style>
	.toggleButton{
		border:1px solid #000;
		padding:2px;
		text-align:center;
		width:50%;
	}
	.toggleContent{
		display:none;
		width:50%;
	}
</style>

<div class="toggleButton">開くボタン</div>
<div class="toggleContent">
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ボタンができました。中身はdisplay:noneで隠しておきます。

まだボタンを押しても何も起きません。

開くボタン

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

②jQueryでslideToggleを適応する

$(".toggleButton").on("click",function(){
	$(this).next().slideToggle(500)
})

トグルボタンが完成しました。ボタンを押すと中身がスライドして表示されます。
もう一度押すとスライドして中身が非表示になります。

開くボタン

ソースコード全文

最後に全コードを載せておきます。

<style>
.toggleButton{
　　border:1px solid #000;
　　padding:12px;
　　text-align:center;
　　width:50%;
}
.toggleContent{
　　display:none;
　　width:50%;
}
</style>
<div class="toggleButton">開くボタン</div>
<div class="toggleContent">
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
	テキストテキストテキストテキストテキスト
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(".toggleButton").on("click",function(){
	$(this).next().slideToggle(500)
})
</script>

中身を表示した時と非表示にした時でボタンの見た目を変える方法は下記で記しています。
jQueryのトグルボタンで表示時と非表示時でボタンを切り替える方法

以上jQueryでシンプルなトグルボタンを実装する方法でした。