asciidoctorのHTML出力で、動的なコードの表示/非表示を試してみた

## 概要
asciidoctorのhtml出力で動的な記事の非表示をしてみる。
できるからといって、オススメする訳ではありません。

pass で htmlコードを直接流し込むことができて、普通に JavaScript で実現するだけです。
本屋で立ち読みして、便利そうなので jQuery を使ってみました。

### 環境
Ubuntu 18.04
asciidoctor 1.5.8
※コメントにある通り、2.0.0 からは asciidoctor の機能で実現できます。

## コード

解説。jQueryのコードそのままです。
asciidoctor的には、`[#foo]` が `<tag id="foo">～</tag>` に相当することから制御できます。

1. jquery-3.4.1.min.js を読み込んでいる。HTMLコードなので pass:[～] の指定で文字列化を抑制する。
2. `#maxim_toggle_button` が表示・非表示のボタンに相当するコンポーネントとなる
3. `#maxim_block` が、ボタンにより、表示されたり隠されたりするコンポーネントとなる
4. 最後の script のブロックは、初期化時に`#maxim_toggle_button`のテキストの更新と、`#maxim_block` の表示・非表示状態に変える。

```asciidoctor,linenum
=== Hide & Show
pass:[<script src="jquery-3.4.1.min.js"></script>]

頭隠して尻隠さず

[#maxim_toggle_button]
...
[#maxim_block]
----
Head
----
Ass

[pass,subs="attributes"]
++++
<script>
$(function() {
  $('#maxim_block').hide();
  $('#maxim_toggle_button').text('▾ hide')

  $("#maxim_toggle_button").click(function() {
    $("#maxim_block").toggle();
    if ($('#maxim').is(':visible')) {
      $('#maxim_toggle_button').text('▾ hide')
    } else {
      $('#maxim_toggle_button').text('❱❱ show')
    }
  });
});
</script>
++++
```

## 実行結果

初期状態で、 `Head` のテキストを隠しています。クリックで、表示されます。
今回は `----` のブロックですが、リストとか色々いけます。

### テキストを隠した状態

![capture_20190904_232507 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/cd016dae-134c-034b-a094-ecba6418d4f7.png)

### 表示した状態

![capture_20190904_232512 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/25bcf127-eeda-9e45-2c56-ddbfbbb31e4d.png)


## おまけ
もう少し、asciidoctor をこじらせると再利用可能となり、多少は実用的なレベルにはなる。
Markdown では、表示・非表示をサポートしている方言はあって、asciidoctor は、
include, pass, subs の置換なりの標準的な機能を組み合わせると、何とか実現できてしまう。

「軽量マークアップ言語＋マクロ言語」みたいなものは、LaTeXやMarkdownでもあって、
以外と asciidoctor と JavaScript の親和性は妙に高い気がする。

```
+ toggle_sample.adoc
+ jquery_toggle.html
```

**toggle_sample.adoc**
`subs="attributes"` の部分で、includeしたファイル中の属性だけ前処理として置換する。
なんだか、古きよき時代の関数呼び出しみたいですね。


```asciidoc
[#maxim_toggle_button]
...

[#maxim_block]
----
Head
----
Ass

頭隠して尻隠さず

:toggle_block: maxim_block
:toggle_button: maxim_toggle_button
[subs="attributes"]
----
include::jquery_toggle.html[]
----
```

**jquery_toggle.html**

```html
<script>
$(function() {
	$('#{toggle_block}').hide();
  $('#{toggle_button}').text('▾ hide')

	$("#{toggle_button}").click(function() {
		$("#{toggle_block}").toggle();

    // change button text
    if ($('#{toggle_block}').is(':visible')) {
      $('#{toggle_button}').text('▾ hide')
    } else {
      $('#{toggle_button}').text('❱❱ show')
    }
	});
});
</script>
```

## 参考

* [W3Schools Online Web Tutorials](https://www.w3schools.com/default.asp)
* [jQuery｜要素をdisplay:noneで隠す方法と表示・非表示を判定する方法](https://takalog.jp/archives/1426)
* [collapsible markdown · GitHub](https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f)
* [R Markdownで任意の領域を表示/非表示ボタンの実装- Qiita](https://qiita.com/kazutan/items/2bb44f1724a8b6d04be6)
* [Awesome Asciidoctor: Collapsible Content - Messages from mrhaki](https://mrhaki.blogspot.com/2019/03/awesome-asciidoctor-collapsible-content.html)  
 > Since Asciidoctor 2.0.0 we can add the collapsible option to an example block.  
⇒ Asciidoctor 2.0.0 より、`example`ブロックに `collapsible` オプションを追加できるようになった。