menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

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

こんにちは(・∀・)

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

Contents

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

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

HTML

スマホに対応させるため<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>

<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

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


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

<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コード


関連リンク

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

  • カテゴリー:Labs