jquery.responsiveTabs.jsを使ってレスポンシブ対応のタブ切替方法｜DAD UNION

jquery.responsiveTabs.jsを使って、コンテンツエリアをレスポンシブに対応したタブ切替え表示する方法を行います。
スマホサイズにするとアコーディオンでコンテンツエリアを表示・非表示で切替えます。

Contents

レスポンシブに対応したタブ切替表示のCSS記述
レスポンシブに対応したタブ切替表示のHTML記述
jquery.responsiveTabs.jsを使って、コンテンツエリアをレスポンシブに対応したタブ切替表示を行うJavaScriptの記述
jquery.responsiveTabs.jsを使ってレスポンシブ対応のタブ切替表示デモページ
ソース元：jQuery Responsive Tabs

レスポンシブに対応したタブ切替表示のCSS記述

※レスポンシブに対応したタブ切替えエリア（.r-tabs）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
body{
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  padding: 20px 0;
  line-height: 2em;
}


.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}

.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}

.r-tabs .r-tabs-panel {
    padding: 15px;
    display: none;
}

.r-tabs .r-tabs-accordion-title {
    display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
    .r-tabs .r-tabs-nav {
        display: none;
    }

    .r-tabs .r-tabs-accordion-title {
        display: block;
    }
}

/* Tabs container */
.r-tabs {
  position: relative;

  background-color: #00c5ad;

  border-top: 1px solid #00c5ad;
  border-right: 1px solid #00c5ad;
  border-left: 1px solid #00c5ad;
  border-bottom: 4px solid #00c5ad;
  border-radius: 4px;

}

/* Tab element */
.r-tabs .r-tabs-nav .r-tabs-tab {
  position: relative;
  background-color: #00c5ad;
}

/* Tab anchor */
.r-tabs .r-tabs-nav .r-tabs-anchor {
  display: inline-block;
  padding: 10px 12px;

  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

/* Disabled tab */
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
  opacity: 0.5;
}

/* Active state tab anchor */
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
  color: #00c5ad;
  text-shadow: none;

  background-color: white;

  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

/* Tab panel */
.r-tabs .r-tabs-panel {
  background-color: white;

  border-bottom: 4px solid white;

  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;

}

/* Accordion anchor */
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
  display: block;
  padding: 10px;

  background-color: #00c5ad;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  font-size: 14px;

  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

/* Active accordion anchor */
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
  background-color: #fff;
  color: #00c5ad;
  text-shadow: none;
}

/* Disabled accordion button */
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
  opacity: 0.5;
}
</style>

レスポンシブに対応したタブ切替表示のHTML記述

※タブコンテンツエリア（id=”horizontalTab”）にタブクリックエリアのリストタグと切替コンテンツエリア（id=”tab-1″～id=”tab-4″）を用意します。必要に応じて変更して下さい。

    <div id="horizontalTab">
        <ul>
            <li><a href="#tab-1">TAB-1</a></li>
            <li><a href="#tab-2">TAB-2</a></li>
            <li><a href="#tab-3">TAB-3</a></li>
            <li><a href="#tab-4">TAB-4</a></li>
        </ul>

        <div id="tab-1">
            <p>TAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリアTAB-1コンテンツエリア</p>
        </div>
        <div id="tab-2">
            <p>TAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリアTAB-2コンテンツエリア</p>
        </div>
        <div id="tab-3">
            <p>TAB-3コンテンツエリアTAB-3コンテンツエリアTAB-3コンテンツエリア</p>
        </div>
        <div id="tab-4">
            <p>TAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリアTAB-4コンテンツエリア</p>
        </div>
    </div>

jquery.responsiveTabs.jsを使って、コンテンツエリアをレスポンシブに対応したタブ切替表示を行うJavaScriptの記述

※jquery-2.1.0.min.js、jquery.responsiveTabs.jsファイルを読み込みます。$(‘タブ切替コンテンツエリア’).responsiveTabs({オプション})を設定します。

    <script src="jquery-2.1.0.min.js"></script>
    <script src="jquery.responsiveTabs.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#horizontalTab').responsiveTabs({
                rotate: false,
                startCollapsed: 'accordion',
                collapsible: 'accordion',
                setHash: true,
                click: function(e, tab) {
                },
                activate: function(e, tab) {
                },
                activateState: function(e, state) {
                }
            });
        });
    </script>