jQueryのトグルボタンで表示時と非表示時でボタンを切り替える方法

前回のトグルボタンの記事ではシンプルなトグルボタンの実装方法を記しました。

基本的なトグルの実装はご存じという前提で進めさせて頂きますので、
「トグル初めて」という方はこちらからご覧ください。
jQueryでシンプルなトグルボタンを実装する

当記事サムネイルのように中身が非表示の時は『And More』と下矢印、
中身が表示の時は『Close』と上矢印に切り替わるようなトグルボタンを
作っていきます。

Contents

①まずシンプルなトグルボタンを用意します。
②ボタン右側に非表示を表す下矢印を配置する
③中身を表示した時に表示用のボタンに切り替える
④最後に非表示に切り替えたときに非表示用のボタンに切り替えます。
ソースコード全文

①まずシンプルなトグルボタンを用意します。

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

ボタンを押すと中身が表示され、もう一度押すと非表示になります。

開くボタン

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

②ボタン右側に非表示を表す下矢印を配置する

CSSとjQueryに記述を追加します。

.toggleButton{
		position:relative;
}
.toggleButton.down:before{
		content:"";
		width:12px;
		height:12px;
		border-bottom:2px solid #000;
		border-right:2px solid #000;
		transform:rotate(45deg);
		position:absolute;
		right:15px;
}

$(".toggleButton").addClass("down")

.downというクラスに疑似要素で下矢印を作成し、
初期表示時にjQueryでボタンに.downクラスを付与しています。

ボタン右側に下矢印ができました。

開くボタン

③中身を表示した時に表示用のボタンに切り替える

文字を『Close』にし右側の矢印を上向きにします。

.toggleButton.up:before{
		content:"";
		width:12px;
		height:12px;
		border-top:2px solid #000;
		border-left:2px solid #000;
		transform:rotate(45deg);
		position:absolute;
		top:8px;
		right:15px;
}

$(".toggleButton").on("click",function(){
	$(this).next().slideToggle(500)
	if($(this).hasClass("down")){
		$(this).removeClass("down")
		$(this).addClass("up")
		$(this).text("Close")
	}
}

.upというクラスに疑似要素で上矢印を作成します。
ボタンクリック時に下矢印（.downクラス）を削除して
上矢印（.upクラス）を加えています。
文字も『Close』にします。

ボタンを押すとボタンが表示用に切り替わります。
しかしもう一度押したときにまだ元のボタンには戻りません。

開くボタン

④最後に非表示に切り替えたときに非表示用のボタンに切り替えます。

ifの続きに以下のように記述を加えます。

else{
		$(this).removeClass("up")
		$(this).addClass("down")
		$(this).text("And More")	
}

ボタンクリック時に上矢印（.upクラス）を削除して
下矢印（.downクラス）を加えています。
文字を『And More』にします。

非表示にした時もボタンが切り替わるようになりました。

開くボタン

ソースコード全文

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

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

<style>
	body{
		padding:100px 0; 
	}
	.toggleButton{
		border:1px solid #000;
		padding:2px;
		text-align:center;
		width:20%;
		margin:30px auto 0;
		position:relative;
	}
	.toggleButton.down:before{
		content:"";
		width:12px;
		height:12px;
		border-bottom:2px solid #000;
		border-right:2px solid #000;
		transform:rotate(45deg);
		position:absolute;
		right:15px;
	}
	.toggleButton.up:before{
		content:"";
		width:12px;
		height:12px;
		border-top:2px solid #000;
		border-left:2px solid #000;
		transform:rotate(45deg);
		position:absolute;
		top:8px;
		right:15px;
	}
	.content{
		display:none;
		width:20%;
		margin:0 auto;
	}
</style>


<div class="toggleButton">And More</div>
<div class="content">
  テキストテキストテキストテキスト
</div>
<div class="toggleButton">And More</div>
<div class="content">
  テキストテキストテキストテキスト
</div>
<!--<div class="toggleButton">And More</div>
<div class="content">
  テキストテキストテキストテキスト
</div>-->

<script>

$(".toggleButton").addClass("down")
$(".toggleButton").on("click",function(){
	$(this).next().slideToggle(500)
	if($(this).hasClass("down")){
		$(this).removeClass("down")
		$(this).addClass("up")
		$(this).text("Close")
	}else{
		$(this).removeClass("up")
		$(this).addClass("down")
		$(this).text("And More")	
	}
})
</script>

以上、jQueryのトグルボタンで表示時と非表示時でボタンを切り替える方法でした。