«
»

2012.05.28

jQueryでアコーディオン

長いソースだとかメモだとかを残しておきたい、が
普段は畳んでおいて必要なときだけ表示するようにしたい。

参考 : ○LINK:jQuery UI - Accordion Demos & Documentation( http://jqueryui.com/demos/accordion/

→→クリックで次の要素を開閉←←

畳まれている要素
JAVASCRIPT:
  1. jQuery(function(){
  2.     jQuery('.accordionNext').click(function() {
  3.         jQuery(this).next().slideToggle('normal');
  4.         return false;
  5.     }).next().hide();
  6. });

HTML:
  1. <p class="accordionNext">次の要素を開閉</p>
  2. <div>畳まれる要素</div>

これでaccrodionNextが書かれた【次の要素】が折りたたみになる。
ボタンでも見だしとかでもOK

CSSの整理

基本的な挙動は上でOKなはず。
CSSを整理して、畳まれているかどうかをわかりやすくしておこう。

ソースコード
HTML:
  1. <!-- ************************* start code  ************************* -->
  2. <div class="accordionWrap">
  3.     <div class="accordionHeader accordionNext">
  4.         <input name="" type="submit" class="" value="open/close" onClick="return false;">   ソースコード
  5.     <!-- accordionHeader --></div>         
  6.     <div class="accordionChild">
  7. <!-- *************** start code  *************** -->
  8. (html)
  9.         ここにコード書く
  10. (/html)
  11. <!-- *************** end code  *************** -->
  12.     <!-- accordionChild --></div>
  13. <!-- accordionWrap --></div>
  14. <!-- ************************* end code  ************************* -->

CSS:
  1. .accordionWrap{
  2.     background-color:#EEEEEE;
  3.     width:90%;
  4.     border:1px solid #669;
  5. }
  6. .accordionHeader{
  7.     background-color:#8fabbe;
  8.     padding:5px;
  9. }
  10. .accordionChild{
  11.     padding:5px;
  12. }

Comment & Trackback

Trackback are closed.

No comments.

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントリンクを nofollow free に設定することも出来ます。