折り畳み(表示/非表示)

概要:
reSTの一部分を、HTMLの<div id=”show-hide-target-[番号]” />タグで囲んで、折り畳み表示する方法。
またトグルスイッチのタグに show-hide-switch-[番号] のIDを設定する

タイトル id 属性の命名規則 概要
表示/非表示の
トグルスイッチ
show-hide-switch-[番号]
クリックしたときに、同じ番号の対象
(show-hide-target-[番号])が切り替わる
デフォルトで初期表示は非表示となるが、
クラスに show-hide-default-show を設定する事で、
初期表示を表示状態にすることが可能
初期表示 class
表示 show-hide-default-show
非表示 (設定は不要)

対象の表示/非表示によって以下のクラスが設定される
状態 class
表示 show-hide-show
非表示 show-hide-hide

表示/非表示の対象 show-hide-target-[番号] トグルスイッチをクリックしたときに 表示/非表示 が切り替わる対象

注釈

idの命名規則やクラス属性の値の名前を変えたい場合、reSTとCSSとJS全てで、以下の名前を書き換える

  • show-hide-switch- (トグルスイッチ)
  • show-hide-target- (トグル対象)
  • show-hide-hide (非表示時のトグルスイッチのクラス)
  • show-hide-show (表示時のトグルスイッチのクラス)
  • show-hide-default-show (初期表示する場合のトグルスイッチのクラス)

サンプル

概要:クリックで 表示/非表示 を切り替える

折り畳みタイトル1
此処にreSTの内容
(デフォルトで閉じた状態)

折り畳みタイトル2
此処にreSTの内容
(デフォルトで開いた状態)

reStructuredText (reST)

概要:
idの命名規則で、表示/非表示の対象とトグルスイッチが決定するので、
トグルスイッチを任意の位置に配置することも可能
.. only:: not (html or singlehtml)

   折り畳みタイトル1

.. only:: html or singlehtml

   .. raw:: html

      <div id="show-hide-switch-1" title="クリックで 表示/非表示 を切り替えます">折り畳みタイトル1</div>
      <div id="show-hide-target-1">


| 此処にreSTの内容
| (デフォルトで閉じた状態)


.. only:: html or singlehtml

   .. raw:: html

      </div><!-- show-hide-target-1 -->
.. only:: not (html or singlehtml)

   折り畳みタイトル2

.. only:: html or singlehtml

   .. raw:: html

      <div id="show-hide-switch-2" class="show-hide-default-show">折り畳みタイトル2</div>
      <div id="show-hide-target-2">


| 此処にreSTの内容
| (デフォルトで開いた状態)


.. only:: html or singlehtml

   .. raw:: html

      </div><!-- show-hide-target-2 -->

Cascading Style Sheets (CSS)

概要:任意のトグルスイッチのスタイルを設定する
.show-hide-show:before { content: url("../_static/minus.png"); }
.show-hide-hide:before { content: url("../_static/plus.png"); }
/* .show-hide-show:after { content: "閉じる"; } */
/* .show-hide-hide:after { content: "開く"; } */

JavaScript (jQuery)

$(function() {
  // 表示/非表示 状態を切り替える
  // @param [in] 表示/非表示 番号
  // @isShow [in] trueは表示。falseは非表示
  function setShowHide(number, isShow)
  {
    var switchShowHide = '#show-hide-switch-' + number;
    var targetShowHide = '#show-hide-target-' + number;
    if (isShow) {
      // トグルスイッチのクラス切り替え
      $(switchShowHide).removeClass('show-hide-hide').addClass('show-hide-show');
      // 表示/非表示 対象を表示
      $(targetShowHide).css('display', '');
    } else {
      // トグルスイッチのクラス切り替え
      $(switchShowHide).removeClass('show-hide-show').addClass('show-hide-hide');
      // 表示/非表示 対象を非表示
      $(targetShowHide).css('display', 'none');
    }
  }
  // 表示/非表示 対象の初期状態設定
  $('[id^="show-hide-switch-"]').each(function() {
    // 表示/非表示 対象の番号取得
    var number = $(this).attr('id').substr(new String('show-hide-switch-').length);
    // トグルスイッチに 'show-hide-default-show' クラスが設定されている場合、初期表示は表示
    setShowHide(number, $(this).hasClass('show-hide-default-show'));
  });
  // トグルスイッチタグがクリックされた場合
  $('[id^="show-hide-switch-"]').click(function() {
    // 表示/非表示のトグル対象の番号取得
    var number = $(this).attr('id').substr(new String('show-hide-switch-').length);
    // 表示/非表示のトグル対象の表示状態で、表示/非表示 状態をトグル
    setShowHide(number, $('#show-hide-target-' + number).css('display') == 'none');
  });
});