【Labs】jQueryでサイズ可変・スマホ対応のアコーディオン - web design lab
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村

【Labs】jQueryでサイズ可変・スマホ対応のアコーディオン


【Labs】jQueryでサイズ可変・スマホ対応のアコーディオン

【jQuery】jQueryでサイズ可変・スマホ対応のアコーディオン

こんにちは(・∀・)

今回はサイズが可変してスマホにも対応したjQueryアコーディオンのサンプルをご紹介します。

jQueryでサイズ可変・スマホ対応のアコーディオン

  1. サンプル
  2. サンプル
1. サンプル

サンプルは横幅100%で可変になっています。min-widthを320pxに設定してありますので、そのサイズまでブラウザ幅を縮めると横スクロールバーが出ます。

スマホに対応させるため<head>内にviewportを読み込みます。


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
HTML

<dl class="sample-accordion">
<dt>1</dt>
<dd><div>コンテント</div></dd>
<dt>2</dt>
<dd><div>コンテント</div></dd>
<dt>3</dt>
<dd><div>コンテント</div></dd>
<dt>4</dt>
<dd><div>コンテント</div></dd>
<dt>5</dt>
<dd><div>コンテント</div></dd>
<!--sample-accordion--></dl>
CSS

.sample-accordion {
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.sample-accordion dt {
  display: block;
  background: #9fb7d4;
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #fff;
}
.sample-accordion dd {
  display: none;
  background: #ddd;
  padding: 10px;
  border-bottom: 1px solid #fff;
  margin-left: 0;
}
JavaScript

$(function(){
$(".accordion dt").click(function() {
$(this).next().slideToggle(100);
});
});
Result

サンプルデモ
スマホでの確認はこちら
QRコード

2. サンプル

ユーザビリティを考慮してボタン部分に+-のトグルを付けました。動き的にはサンプル1と同じく横幅100%で可変になっています。min-widthを320pxに設定してありますので、そのサイズまでブラウザ幅を縮めると横スクロールバーが出ます。

HTML

<dl class="sample-accordion">
<dt id="btn1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span id="b1-1">+</span><span id="b1-2">-</span>
</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus finibus porttitor. Duis in feugiat tortor. Morbi vehicula et nisl sed faucibus. Sed ac suscipit est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas nibh est, convallis et enim id, luctus laoreet leo. Proin bibendum massa quis nibh laoreet, id laoreet neque ornare. In accumsan congue libero et mollis.</p>
</dd>
<dt id="btn2">
<p>In vestibulum turpis id iaculis bibendum.</p>
<span id="b2-1">+</span><span id="b2-2">-</span>
</dt>
<dd>
<p>In vestibulum turpis id iaculis bibendum. Donec pulvinar lectus sit amet ex dapibus dapibus. Nunc id nulla convallis, vestibulum nunc et, pharetra magna. In libero sapien, hendrerit eu blandit in, feugiat in nisl. Sed est lacus, efficitur nec posuere non, sodales non nulla. Praesent pellentesque urna et massa suscipit, at elementum eros rhoncus. Fusce nibh lacus, tincidunt eu ullamcorper ullamcorper, ornare vel felis. In tempor gravida lacus, a consectetur purus convallis ornare.</p>
</dd>
<dt id="btn3">
<p>Cras viverra nibh eu quam semper placerat.</p>
<span id="b3-1">+</span><span id="b3-2">-</span>
</dt>
<dd>
<p>Cras viverra nibh eu quam semper placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rhoncus mauris sagittis purus pellentesque, quis gravida tortor aliquet. Nam rutrum nibh ac est imperdiet, sed semper enim mattis. Proin lobortis justo egestas odio viverra interdum. Sed sed eros luctus, rhoncus nisl nec, pulvinar nunc. Integer efficitur leo velit, at dictum ante condimentum in. Praesent pretium varius vulputate. Praesent in vehicula erat. Nam nec nisi a ipsum consectetur bibendum. Quisque ac est quis odio ullamcorper rutrum. Nulla a rhoncus orci. Morbi at dui in risus rhoncus fringilla vel at velit. Fusce tempus iaculis eleifend. Nulla elementum non eros sed cursus. Cras auctor lobortis sollicitudin.</p>
</dd>
<dt id="btn4">
<p>Etiam placerat, urna sed fermentum consequat, odio justo maximus libero, scelerisque vehicula sem massa et ex.</p>
<span id="b4-1">+</span><span id="b4-2">-</span>
</dt>
<dd>
<p>Etiam placerat, urna sed fermentum consequat, odio justo maximus libero, scelerisque vehicula sem massa et ex. Nam eros sapien, commodo sit amet urna sit amet, congue mollis purus. Etiam sit amet leo at urna molestie semper. Fusce quis mollis metus, lacinia volutpat neque. Curabitur non ligula aliquet metus vestibulum rutrum sit amet in felis. Proin pretium metus turpis, ut tempor turpis condimentum eu. Donec tempus ante ac lacus porttitor ullamcorper. Cras ac nisl sed tellus consectetur imperdiet id in nisl.</p>
</dd>
<dt id="btn5">
<p>Aenean sit amet placerat turpis.</p>
<span id="b5-1">+</span><span id="b5-2">-</span>
</dt>
<dd>
<p>Aenean sit amet placerat turpis. Aliquam erat volutpat. Phasellus a rutrum sem, id convallis erat. Morbi imperdiet nec dolor sed efficitur. Integer congue mauris iaculis lacinia cursus. Fusce pretium massa at fermentum facilisis. Ut non quam auctor, feugiat lacus et, posuere purus. Sed sit amet urna bibendum, feugiat velit a, consequat enim. Donec elementum nisl sed nibh ornare, in ultrices arcu condimentum. Morbi id interdum nunc. Nunc vestibulum ligula sit amet arcu egestas, a semper sapien bibendum. Suspendisse elementum, elit nec hendrerit fermentum, turpis arcu fringilla ligula, posuere semper nulla ante ac diam.</p>
</dd>
<!--sample-accordion--></dl>
CSS

.sample-demo .sample-accordion {
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.sample-demo .sample-accordion dt {
  display: block;
  background: #9fb7d4;
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #fff;
  display: flex;
}
.sample-demo .sample-accordion dt p {
  flex: 1;
}
.sample-demo .sample-accordion dd {
  display: none;
  background: #ddd;
  padding: 10px;
  border-bottom: 1px solid #fff;
  margin-left: 0;
}
.sample-demo .sample-accordion dt #b1-2,
.sample-demo .sample-accordion dt #b2-2,
.sample-demo .sample-accordion dt #b3-2,
.sample-demo .sample-accordion dt #b4-2,
.sample-demo .sample-accordion dt #b5-2 {
  display: none;
  padding: 0 10px;
  align-self:  flex-end;
}
.sample-demo .sample-accordion dt #b1-1,
.sample-demo .sample-accordion dt #b2-1,
.sample-demo .sample-accordion dt #b3-1,
.sample-demo .sample-accordion dt #b4-1,
.sample-demo .sample-accordion dt #b5-1 {
  display: block;
  padding: 0 10px;
  align-self:  flex-end;
}
.sample-demo .sample-accordion dt #b1-2.active,
.sample-demo .sample-accordion dt #b2-2.active,
.sample-demo .sample-accordion dt #b3-2.active,
.sample-demo .sample-accordion dt #b4-2.active,
.sample-demo .sample-accordion dt #b5-2.active {
  display: block;
}
.sample-demo .sample-accordion dt #b1-1.active,
.sample-demo .sample-accordion dt #b2-1.active,
.sample-demo .sample-accordion dt #b3-1.active,
.sample-demo .sample-accordion dt #b4-1.active,
.sample-demo .sample-accordion dt #b5-1.active {
  display: none;
}
JavaScript

$(function(){
$(".sample-accordion #btn1").click(function() {
$(this).next().slideToggle(100);
$(".sample-accordion dt #b1-1").toggleClass("active");
$(".sample-accordion dt #b1-2").toggleClass("active");
});
$(".sample-accordion #btn2").click(function() {
$(this).next().slideToggle(100);
$(".sample-accordion dt #b2-1").toggleClass("active");
$(".sample-accordion dt #b2-2").toggleClass("active");
});
$(".sample-accordion #btn3").click(function() {
$(this).next().slideToggle(100);
$(".sample-accordion dt #b3-1").toggleClass("active");
$(".sample-accordion dt #b3-2").toggleClass("active");
});
$(".sample-accordion #btn4").click(function() {
$(this).next().slideToggle(100);
$(".sample-accordion dt #b4-1").toggleClass("active");
$(".sample-accordion dt #b4-2").toggleClass("active");
});
$(".sample-accordion #btn5").click(function() {
$(this).next().slideToggle(100);
$(".sample-accordion dt #b5-1").toggleClass("active");
$(".sample-accordion dt #b5-2").toggleClass("active");
});
});
Result

サンプルデモ
スマホでの確認はこちら
QRコード

関連リンク

【CSS3】CSSだけで横に展開するアコーディオン
【CSS3】CSSだけでサイズ可変・スマホ対応のアコーディオン
【jQuery】jQueryでスマホ画面は縦方向PC画面は横方向に展開するアコーディオン


にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村