將 org-mode 輸出成 HTML 並具有按鈕可以切換顯示隱藏區域

blog.html

<!-- 這份檔案是由 blog.org 產生出來 -->
<br><br> <div class="text-center">
<p class="btn btn-default" onclick="toggle_visible('p001')">
點我顯示/隱藏內容
</p>
</div><br><br>

<div id="p001" style="display:none">
<p>
這裡會被隱藏，直到點下 "點我顯示/隱藏內容"
要注意到 id 和 toggle_visible() 必須要對應到
</p>
</div>

blog.js

function toggle_visible(id) {
  // toggle the conten
  var e = document.getElementById(id);
  if (e.style.display == 'block' || e.style.display=='') e.style.display = 'none';
  else e.style.display = 'block';
}

blog.sh

## 這個檔案是 org-mode ，但是 gist 要用 raw 才會顯示完整的
## 所以我偽裝他是 sh 腳本

#+HTML: <br><br> <div class="text-center">
#+ATTR_HTML: :class btn btn-default :onclick toggle_visible('p001')
點我顯示/隱藏內容
#+HTML: </div><br><br>


#+HTML: <div id="p001" style="display:none">
這裡會被隱藏，直到點下 "點我顯示/隱藏內容"
要注意到 id 和 toggle_visible() 必須要對應到
#+HTML: </div>