【SharePoint 2013】サイドナビゲーションをアコーディオン化する

以前、「SharePoint の Web パーツを開閉する」で紹介したをコードを改良して、
サイドナビゲーションをアコーディオン化します。

※jQuery と他のライブラリがコンフリクト(競合)しないようにしています。

ul.ms-core-listMenu-root li.static {
  margin: 0;
  list-style: none;
}
ul.ms-core-listMenu-root > li.static > span.menu-item {
  position: relative;
  margin: 0;
  padding: 0.5em 1.5em;
  border: 2px solid #0479E7;
  font-size: 110%;
  font-weight: bold;
  background-color: #DDEEFF;
  height: 1.5em;
  display: block;
}
ul.ms-core-listMenu-root > li.static > span.menu-item + ul {
  margin: 1em 0;
}

ul.ms-core-listMenu-root > li.static > span.menu-item:before {
  content: "";
  position: absolute;
  background: #222288;
  top: 50%;
  left: 4px;
  margin-top: -16px;
  height: 32px;
  width: 8px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

ul.ms-core-listMenu-root > li.static > span.menu-item:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: solid 2px #7f7f7f;
  border-right: solid 2px #7f7f7f;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transition: .2s;
}

ul.ms-core-listMenu-root > li.static > span.closed:after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

(function ($) {
  $.fn.extend({
    BodyToggle: function (speed, closedOther) {
      var className = 'closed';
      $(this).toggleClass(className);
      $(this).next().slideToggle(speed);

      if (closedOther) {
        $(this).parent('li').siblings().each(function () {
          var $title = $(this).children().first();
          $title.addClass(className);
          $title.next().slideUp(speed);
        });
      }
    },
  });

  $(window).load(function () {
    $('#DeltaPlaceHolderLeftNavBar span.ms-core-listMenu-item').click(function () {
      $(this).BodyToggle('normal', true);
    }).first().click();
  });
})(jQuery);

参考サイト

• スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery