アコーディオン（行ver.）

追加可能パーツ 変更可能箇所 NG 同一ページに
複数設置		 ページ複製・
クリップボード使用可否

（行に設置可能なパーツ）

  • カラム（~4つまで）
  • 基本パーツ
    • リッチテキストパーツ
    • 見出しパーツ
    • ボタンパーツ
    • 画像パーツ　etc...
  • 行の背景色

  • 行の角丸/ボックスシャドウ

  • 行の余白
  • テキストカラー

  • [＋]アイコンのデザイン

 

JS変更箇所

  • アコーディオンの開閉時間 ※①
    変数名 : duration02
 展開領域内で
行を複数配置✕※1		 〇

〇
※留意事項

※1：クリック領域の行（row）と展開領域の行（row）にはそれぞれ一つずつしか行（row）を置けません。
（例）展開領域内で4カラムの行を２つ配置→NG✕


【JS】
 ※①：デフォルトの開閉速度は0.3秒です。
構造図を見る

デモ

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ダミー

見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ダミー
ダミー
ダミー
ダミー

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

見出し

ダミー

見出し

ダミー

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ダミー

見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ボタン

構造図

デモのパーツの構造を説明しています。

構造図_アコーディオン（行ver.）

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSをカスタムCSSに記述。
  • JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
  • CSSはデザインに合わせて適宜変更してください。
     
  1. クリック対象の行（row）にクラス名「js-accordionBtn_row accordionBtn_row」の2つを追加。
    ※この行がアコーディオンのクリック領域になります。
  2. 上記の直下に行（row）を新規追加し、クラス名「js-accordionElements_row accordionElements_row」の2つを追加。
    ※この行がクリック後の表示領域になります。

  3. プラス[＋]アイコンなどの挙動は、各自カスタムCSSで調整してください。

注意点

  • クリック領域の行に対して、表示領域の行を2つ以上使用することはできません。
  • 「クリック領域の行」と「表示領域の行」は必ず連続で並べてください。間に他の行が入ると正常に表示されません。
  • 表示領域の行のdisplayの値をtableからflexに変更しており、通常の行と構造が変わっているのでご注意ください。

  • 新CMSの場合：複合パーツ[Q&A]は従来のものと構造が異なるため、使用できません。デフォルトパーツを使用し、上記フローに沿って構築するようにしてください。

カスタムCSS

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

2024-01-26更新（v1.0.0）

CSSをコピーする
/*----- アコーディオン（行ver.） START v1.0.0-----*/
.theme-fo-base {
.wrapper {
.contents {
section {
.inner {
.row {
&.accordionBtn_row,
&.accordionElements_row {
background: #fff;
margin: 0;
padding: 20px 30px;
@include breakpoint-sp {
padding: 20px;
}
.col {
width: 100%;
}
}
&.accordionBtn_row {
cursor: pointer;
position: relative;
padding-right: 70px;
@include breakpoint-sp {
padding-right: 60px;
}
//アコーディオンOPEN
&.is-active {
&::after {
content: "\f056";
}
}
&::after {
content: "\f055";
font-family: $font_family_awsm6;
display: inline-block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 28px;
font-weight: 900;
line-height: 1;
color: #ffad2f;
}
.col {
.component {
&.heading {
:is(h1,h2,h3,h4,h5) {
cursor: inherit;
}
}
}
}
}
&.accordionElements_row {
display: flex;
gap: 20px;
@include breakpoint-sp {
flex-direction: column;
gap: 0;
padding-top: 0;
}
& + .accordionBtn_row {
margin-top: 30px;
@include breakpoint-sp {
margin-top: 20px;
}
}
}
}
}
}
}
}
}
/*----- アコーディオン（行ver.） END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

2024-01-26更新（v1.0.0）

CSSをコピーする
/*----- アコーディオン（行ver.） 編集画面用 START v1.0.0-----*/
.row {
&.accordionBtn_row,
&.accordionElements_row {
position: relative;
&::before {
position: absolute;
color: #fff;
padding: 5px 5px;
right: 0;
top: -24px;
font-size: 14px;
line-height: 1;
}
}
&.accordionBtn_row {
border: 1px solid #000;
&::before {
content: "クリック領域";
background: #000;
}
}
&.accordionElements_row {
border: 1px solid #00f;
&::before {
content: "展開領域";
background: #00f;
}
}
}
/*----- アコーディオン（行ver.） 編集画面用 END -----*/

JavaScript

2024-09-06更新（v1.0.0）

JavaScriptをコピーする
<script>
'use strict';
/* -------------------------------
アコーディオン（行ver.） v1.0.0
--------------------------------- */
/*------------- 変数定義 【変更可能】 START -------------*/
const rowDuration = 300;/* アコーディオンが表示されるまでの時間 [ms] */
/*------------- 変数定義 【変更可能】 END -------------*/

/* アコーディオンでスライドさせたい要素を取得 (クラス名を指定) */
const rowSlideToggleElements = document.querySelectorAll('.js-accordionElements_row');
/* スライドを起動するトリガーのボタンを取得 (クラス名を指定) */
const rowSlideToggleBtn = document.querySelectorAll('.js-accordionBtn_row');

rowSlideToggleElements.forEach((an) => {
an.style.display = 'none';
});

/* slideToggle */
rowSlideToggleBtn.forEach((rowSlideToggleBtn) => {
rowSlideToggleBtn.addEventListener('click', () => {
if (rowSlideToggleBtn.nextElementSibling.classList.contains("js-accordionElements_row")) {
const el = rowSlideToggleBtn.nextElementSibling;
rowSlideToggle(el, rowDuration);
}
});
});

/* slideUp */
const rowSlideUp = (el, rowDuration) => {
el.previousElementSibling.classList.remove('is-active');
el.style.height = el.offsetHeight + 'px';
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = rowDuration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
setTimeout(() => {
el.style.display = 'none';
el.style.removeProperty('height');
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, rowDuration);
};

/* slideDown */
const rowSlideDown = (el, rowDuration) => {
el.previousElementSibling.classList.add('is-active');
el.style.removeProperty('display');
let display = window.getComputedStyle(el).display;
if (display === 'none') {
display = 'flex';
}
el.style.display = display;
let height = el.offsetHeight;
el.style.overflow = 'hidden';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
el.offsetHeight;
el.style.transitionProperty = 'height, margin, padding';
el.style.transitionDuration = rowDuration + 'ms';
el.style.transitionTimingFunction = 'ease';
el.style.height = height + 'px';
el.style.removeProperty('padding-top');
el.style.removeProperty('padding-bottom');
el.style.removeProperty('margin-top');
el.style.removeProperty('margin-bottom');
setTimeout(() => {
el.style.removeProperty('height');
el.style.removeProperty('overflow');
el.style.removeProperty('transition-duration');
el.style.removeProperty('transition-property');
el.style.removeProperty('transition-timing-function');
}, rowDuration);
};

/* slideToggle */
const rowSlideToggle = (el, rowDuration) => {
if (window.getComputedStyle(el).display === 'none') {
return rowSlideDown(el, rowDuration);
} else {
return rowSlideUp(el, rowDuration);
}
};
/* -------------------------------
アコーディオン（行ver.） END
--------------------------------- */
</script>
JSパーツ集ロゴ

      JSが必要な実装の注意点スプレッドシート（H列）は読みましたか？

      ※必ず注意点（H列）をご確認の上閲覧ください

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.