Noël Café : Blog

Noëlの公開備忘録とひとりごと。コメント・トラックバックご自由に

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

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


見本↓

xxx Text xxx

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();
});
});


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

<button id="showbutton-01" class="showbutton">xxx Show xxx</button>
<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

Leave a Reply

*


CAPTCHA



Trackback URL