jQueryで折りたたみボタン (備忘録)

完璧に自分用のメモです。
jQueryで折りたたみボタンの見本とコードの備忘録

---

見本↓

---

コード↓
IDの数字を書き換えて複数対応する。

<div id="showspace-01" style="display:none;" class="oritatami">
<p>
xxx Text xxx
</p>
<button id="hidebutton-01" class="hidebutton">xxx Close xxx</button>
</div>
<script type="text/javascript">
jQuery(function(){
    jQuery("#showbutton-01").click(function(){
        jQuery("#showspace-01").show();
        jQuery("#showbutton-01").hide();
    });
    jQuery("#hidebutton-01").click(function(){
        jQuery("#showspace-01").hide();
        jQuery("#showbutton-01").show();
    });
});
</script>

classの設定は3箇所。

• Showボタン → showbutton
• Hideボタン → Hidebutton
• 開く箇所 → oritatami