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

WEBデザイン制作

よくLPで見かけるQ&AでQを押すとAの文章が開くという仕組み(アコーディオン)のコード紹介です。

サンプルはこちら

chromeやFireFoxなどのブラウザでデベロッパーツールを使ってスマホ版、PC版それぞれ確認していただけると分かりやすいと思います。

2021/3/6更新
アコーディオン実装方法の記事一覧

仕様

1.フォトショでスライスされた2枚の画像を使ってアコーディオンを実装する
2.PC画面での画像は幅1200px(図1)
3.スマホ画面は2番の画像の中央800px分をCSSで拡大して表示(図2)

(図1)PC版での見え方。フォトショップ のスライス機能を使うと良い。

(図2)スマホ表示で中央800px分がどのように見えるか、左右200pxずつ(計400px)で四角形を作ると役立つ。

この画像のPSDデータを使いたい場合は下記DLリンクよりご自由にお使いください。

 

実際に書き出した画像2枚

1枚目↓

2枚目↓

メリット:1種類の画像でPC・SPどちらにも対応できる。

 

必要コード

index.html

headタグ内に以下をコピペ

レスポンシブ化、CSSとjsの読み込みコード、アコーディオン設定
※重複するコード(特にheadタグ内)があれば適宜自身のコーディングに合わせてください。

<!--▼これはレスポンシブデザインにする為のコードです。▼-->
<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>
<!--↑↑↑アコーディオン設定↑↑↑-->

bodyタグ内に以下をコピペ

基本体裁、アコーディオン実装コード
※sectionで囲った二つの画像(sam001.jpg、sam002.jpg)がアコーディオンになります。

<!--▼基本体裁▼-->
<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>

 

style.css

以下をコピペ

基本CSS、アコーディオンの体裁

/*基本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*/

1200px以上の画像で実装したい場合は「.w_1200」のmax-widthの数値を任意の数値に変えてください。

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