JavaScript

レスポンシブ対応のタブ切替方法【jquery.responsiveTabs.js】

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

レスポンシブに対応したタブ切替表示の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>

jquery.responsiveTabs.jsを使ってレスポンシブ対応のタブ切替表示デモページ

jquery.responsiveTabs.jsを使ってレスポンシブ対応のタブ切替表示デモページ

ソース元:jQuery Responsive Tabs

以下がソース元です。
jQuery Responsive Tabs

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。