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

jQuery

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

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


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

<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>


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

開くボタン
テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト




②jQueryでslideToggleを適応する

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


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

開くボタン
テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト





以上jQueryでシンプルなトグルボタンを実装する方法でした。最後に全コードを載せておきます。

<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://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(".toggleButton").on("click",function(){
	$(this).next().slideToggle(500)
})
</script>

コメント

タイトルとURLをコピーしました