Programingこの広告は、90日以上更新していないブログに表示しています。jQueryTwitterFacebookHatenaPocketjQueryを使ってテーブル内でアコーディオンするための方法をご紹介します。開くボタンを押すと隠れていたコンテンツが開閉するようになっています。テーブルをすっきり見せたいけど詳細なども表示させないといけないときのUIとして参考になるかもしれません。Demoはてなブログの料金表をサンプルとして使用しています。「+」ボタンをクリックするとコース料金の詳細が表示されるようになっています。HTML「+」ボタンと「-」ボタンを用意します。「-」ボタン(.close)とコースの詳細部分(.course)はcssで表示させないようにしています。20px;}Javascript「+」ボタン(.open)をクリックするとコースの詳細(.course)が表示し、「+」ボタン自体は非表示になり「-」ボタンが表示します「-」ボタン(.close)をクリックするとコースの詳細(.course)が消え、「-」ボタン自体は非表示になり「+」ボタンが表示します。});});</script>今回使用したjQueryメソッド.parent()指定した要素の各親要素を取得します。セレクタによって絞り込むことも可能です。.nextAll()指定した要素のすべての兄弟要素を取得します。セレクタによって絞り込むことも可能です。.find()指定した要素の子孫要素でセレクタにマッチする要素を取得します。.toggle()マッチした要素の表示・非表示.hide()マッチした要素の非表示.show()マッチした要素の表示.next()マッチした要素の各要素の直後の兄弟要素を取得します。セレクタが指定されている場合、そのセレクタに一致する場合にのみ、次の兄弟要素を取得します。.prev()マッチした要素の各要素の直前の兄弟要素を取得します。Ten」をカスタマイズするシンプルなデザインにカスタマイズしてみました。»プロフィールid:vintonWebデザインからプログラミングまで幅広く勉強しています。手探りのWeb作り二進一退IT蟹工船ぱおたんのweb勉強日記ウェブメーカーしっぱ四畳半web日記EGZ-Blog電習ノートすろーボートWeb関連あれこれ初心者からのweb勉強hansolostar1810の日記fatwebstudyのWebサイト制作記録ページビューはてなブログをはじめよう!vintonさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。