【jquery】コピペでOK！画像で作るレスポンシブアコーディオン

<!--▼これはレスポンシブデザインにする為のコードです。▼-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
<!--▼CSS読み込み▼-->
<link rel="stylesheet" href="style.css"/>
    
<!--▼js読み込み▼-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    
<!--↓↓↓アコーディオン設定↓↓↓-->
<script type="text/javascript">
$(function(){
$(".toggle").show();
$(".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');
}			
});
});
</script>
<!--↑↑↑アコーディオン設定↑↑↑-->

<!--▼基本体裁▼-->
<div style="text-align:center;">
<div class="w_1200">
<!--▲基本体裁▲-->
<!--↓↓↓アコーディオン実装↓↓↓-->
<section>
      <div id="accordion1" class="accordionbox">
        <dl class="accordionlist">
          <dt class="clearfix">
            <div class="title"> 
              <img src="images/accordion/sam001.jpg" class="accordion_img" alt="">
              </span></div>
          </dt>
          <dd><img src="images/accordion/sam002.jpg" class="accordion_img" alt=""> </dd>
        </dl>
      </div>
</section>
<!--↑↑↑アコーディオン実装↑↑↑-->
</div> </div>

/*基本css*/
* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-style: normal;
}
.accordion_img {
	vertical-align: bottom;
	width: 100%;
}
.w_1200{
	margin: 0 auto;
  max-width: 1200px;
	overflow: hidden;
	text-align: center;
	margin-top: -5px;
}
@media screen and (max-width: 800px) {
.accordion_img {
    height: 100%;
    width: 150%;
    margin: 0 -50%;
}
}
/*基本css*/

/*アコーディオンcss*/
dl {
    margin: 0;
}
.accordionlist dt{
    display:block;
    background: #fff;
}
.accordionlist dt:first-child{
    border-top: none !important;
}
.accordionlist dt .title{
    padding-left: 0px;
}
.accordionlist dd{
    display:none;
	background: #fff;
	padding:0 0 0px 0px;
}
/*アコーディオンcss*/