クリックで隠れたコンテンツを表示するというライブラリは数多くあります。JavaScriptで書くのも慣れている人であれば難しくないかも知れませんが、DOMを操作するJavaScriptは後々のメンテナンスがよくありませんので避けたいと思うでしょう。 そこでオーバーレイ表示をとても簡単に実現するライブラリ、Purplecoat.jsを紹介します。JavaScriptを書く必要もないのが便利です。

Purplecoat.jsの使い方

こちらが元々の表示。

ボタンクリックでオーバーレイ表示。

利用例のサンプルです。

こんな感じでどこのデザインが変更できるかを分かりやすく表示します。

まずオーバーレイしたいDOMに次のような設定をします。

<img data-purplecoat="foo"
     data-purplecoat-label="Hello!"/>

次にクリックアクションを行うところに次のように記述します。

<button data-purplecoat-toggle="foo" />

これでfooと紐付いたDOMがボタンのアクションでオーバーレイ表示するようになります。JavaScriptがないのが良いですね。

Purplecoat.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Purplecoat.js | Simple Labeled Overlays ellekasai/purplecoat.js