【コピペでOK】画像で作れる！プラス（+）とマイナス（-）の切り替え付きレスポンシブアコーディオン

<!--▼これはレスポンシブデザインにする為のコードです。▼-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!--▼js・css読み込み▼-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link href="style.css" rel="stylesheet">

<!--↓↓↓アコーディオン設定↓↓↓-->
<script type="text/javascript">
// JavaScript Document
$(function() {
$(".ac_question").click(function(){
$(this).next(".ac_answer").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<!--↑↑↑アコーディオン設定↑↑↑-->

<!--アコーディオン-->
<div class="accordion_area">
<dl class="accordion_box">
<div class="ac_item">
<dt class="ac_question">
<img src="images/image1.jpg" alt="">
</dt>
<dd class="ac_answer">
<img src="images/image2.jpg" alt="">
</dd>
</div>
<div class="ac_item">
<dt class="ac_question">
<img src="images/image1.jpg" alt="">
</dt>
<dd class="ac_answer">
<img src="images/image2.jpg" alt="">
</dd>
</div>
</dl>
</div>
<!--END アコーディオン-->

/* リセットCSS 適宜変更してください */
* {
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
}
img{
width: 100%;
vertical-align: bottom;
display: block;
}

/*アコーディオン*/
.accordion_area {
background:#E8E8F3;
background-size: 100%;
padding: 2.6% 0 2.6%;
width:100%;/*背景の幅設定*/
}
.accordion_box{
margin: 0 auto;
width: 100%;
max-width:680px;/*PC版でのアコーディオン幅の設定*/
}
.ac_item{
margin-bottom: 5%;
}
.ac_answer{
display:none;
}
.active{
border-radius: 0;
overflow: hidden;
}
.ac_question{
display: block;
position: relative;
cursor: pointer;
}
.ac_question::before{
content: '';
position: absolute;
width: 5.8%;/*+、-の大きさ設定*/
height: 1px;
border-bottom: solid #FFFFFF;/*+、-の色設定*/
border-bottom-width: 0.3vw;/*+、-の太さ設定*/
margin: auto;
top: 0;
bottom: 0;
right: 6.2%;/*+、-の位置設定*/
transform: rotate(0deg);
transition: all .4s;
z-index: 5;
}
.ac_question::after{
content: '';
position: absolute;
width: 5.8%;/*+、-の大きさ設定*/
height: 1px;
border-bottom: solid #FFFFFF;/*+、-の色設定*/
border-bottom-width: 0.3vw;/*+、-の太さ設定*/
margin: auto;
top: 0;
bottom: 0;
right: 6.2%;/*+、-の位置設定*/
transform: rotate(90deg);
transition: all .4s;
z-index: 5;
}
.active::before{
transform: rotate(360deg);
transition: all .4s;
}
.active::after{
transform: rotate(360deg);
transition: all .4s;
}
@media screen and (max-width: 800px) {
.accordion_box{
width: 100%;/*スマホ表示時のアコーディオン幅設定*/
}
}