開閉するアコーディオンメニューに使える！＋から－へ、＋から×へアイコンを切り替えるアニメーション

公開日：2016/01/21

CSS CSS3 jQuery アニメーション

開閉するアコーディオンメニューに使える！＋から－へ、＋から×へアイコンを切り替えるアニメーション

開閉するアコーディオンメニューなどに＋(プラス)のアイコンをつけて、
クリックしたら－(マイナス)や×(バツ)のアイコンに変えたい！

なんてことありませんか？

今回は、＋と－(プラスとマイナス)、＋と×(プラスとバツ)のアイコンをクリックで切り替えるアニメーションをご紹介します。

jqueryで開閉とクラスの追加削除を行い、CSSでアニメーションを行っています。

アニメーションのデモページはこちら

css_accordion_pm_1

上が＋と－(プラスとマイナス)、下が＋と×(プラスとバツ)のアイコンをクリックで切り替えるアニメーションです。

デモページはこちら

＋から－へ、＋から×へアイコンを切り替えるアニメーション

JS

jqueryを読み込み、以下の内容を記述します。
クリック時に「開閉とクラスの追加削除」を行う指定をしています。

$(function(){
	$(".accordionbox dt").on("click", function() {
		$(this).next().slideToggle();	
		// activeが存在する場合
		if ($(this).children(".accordion_icon").hasClass('active')) {			
			// activeを削除
			$(this).children(".accordion_icon").removeClass('active');				
		}
		else {
			// activeを追加
			$(this).children(".accordion_icon").addClass('active');			
		}			
	});
});

$(function(){

$(".accordionbox dt").on("click", function() {

$(this).next().slideToggle();

// activeが存在する場合

if ($(this).children(".accordion_icon").hasClass('active')) {

// activeを削除

$(this).children(".accordion_icon").removeClass('active');

}

else {

// activeを追加

$(this).children(".accordion_icon").addClass('active');

}

});

HTML

.accordion_iconが＋、－の切り替え部分になります。
それぞれspanで書いています。

<div id="accordion" class="accordionbox">
    <dl class="accordionlist">
        <dt class="clearfix">
            <div class="title">
                <p>＋、－切り替え</p>
            </div>
            <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>＋、－切り替え</dd>
        <dt class="clearfix">
            <div class="title">
                <p>＋、－切り替え</p>
            </div>
            <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>＋、－切り替え</dd>
    </dl>
</div>

</div>

</dt>

</div>

</dt>

</dl>

</div>

CSS

.activeがついているものはddが表示されている状態のアイコン、つまり－(マイナス)のアイコンの指定です。

.accordionbox{
	width: 50%;
	background:#FBDBC4;
	margin: 10px auto 40px;
	padding: 20px;
}
.accordionlist dt{
    display:block;
    background: #fff;
    padding: 20px 0 10px 5px;
    border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
    border-top: none !important;
}
.accordionlist dt .title{
    padding-left: 10px;
	float: left;
}
.accordionlist dd{
    display:none;
	background: #fff;
	padding:0 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
	margin-right: 5px;
}
.accordion_icon span {
	position: absolute;
    left: 6px;
    width: 50%;
	height: 2px;
    background-color: #F88789;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 5px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 5px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.accordionbox{

width: 50%;

background:#FBDBC4;

margin: 10px auto 40px;

padding: 20px;

}

.accordionlist dt{

display:block;

background: #fff;

padding: 20px 0 10px 5px;

border-top: 1px solid #DFDFDF;

}

.accordionlist dt:first-child{

border-top: none !important;

}

.accordionlist dt .title{

padding-left: 10px;

float: left;

}

.accordionlist dd{

display:none;

background: #fff;

padding:0 0 20px 15px;

}

.accordion_icon,

.accordion_icon span {

display: inline-block;

transition: all .4s;

box-sizing: border-box;

}

.accordion_icon {

position: relative;

width: 30px;

height: 30px;

float: right;

margin-right: 5px;

}

.accordion_icon span {

position: absolute;

left: 6px;

width: 50%;

height: 2px;

background-color: #F88789;

border-radius: 4px;

-webkit-border-radius: 4px;

-ms-border-radius: 4px;

-moz-border-radius: 4px;

-o-border-radius: 4px;

}

.accordion_icon span:nth-of-type(1) {

top: 5px;

transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

}

.accordion_icon span:nth-of-type(2) {

top: 5px;

transform: rotate(90deg);

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

-o-transform: rotate(90deg);

}

/*＋、－切り替え*/

.accordion_icon.active span:nth-of-type(1) {

display:none;

}

.accordion_icon.active span:nth-of-type(2) {

top: 5px;

transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

}

＋、×の切り替え用はこちら

/*＋、×切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	top: 5px;
    transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.accordion_icon.active span:nth-of-type(2) {
	top: 5px;
    transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
}