![http://ri-mode.com/rainbow/2015/04/16/simple_accordinonmenu_jquery/](https://cdn-ak-scissors.b.st-hatena.com/image/square/c33591dc5dda46c64a0f2351c77bda6fbae55631/height=288;version=1;width=512/https%3A%2F%2Fri-mode.com%2Frainbow%2Ffiles%2Fjquery021.jpg)
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
これから新しいお家での暮らしを始める家族に、心からの安心と信頼を提供します。クラウンクラウンは、2011年に設立されましたが、その前に代表の松本が1980年代から設備工事のクレーム処理や手直しの責任者として長年の経験を持っています。この技術とノウハウをベースに、お客様に安心して工事を依頼いただけるサービスを提供しています。 インターネット経由で工事依頼が増える中、消費者は自ら情報を探して理解する必要があります。しかし、これがミスマッチや誤解を招くことがあります。クラウンクラウンでは、消費者が後悔しないよう、わかりやすく大切な情報を前面に公開することを心がけています。 私たちのサービスは、安心・高品質・適正価格・明朗会計を大切にし、納得できる選択ができるようサポートします。さらに、設備工事業界全体の改善を目指して、業界のワークライフバランス改善にも取り組み、働く環境をより良くしていきます。
この前「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」という記事を書きました。jQueryでしそうなことをCSSのみで作ったのですが、これはマウスを乗せたとき動くようにしたいのでhoverを使いました。 今回はクリックで開閉するということで、hoverは使えません。では何を使うのか。 ラジオボタンを使います。ある項目にチェックするとそれまでチェックされていた項目のチェックが外れる。アコーディオンメニューと仕組みが一緒です。 今回もサンプルを用意していますのでご覧ください。 IE8以下の場合「:checked」が非対応なのでうまく表示されません。しかし、CSS3セレクタはSelectivizrを使えば簡単に対応できます。使い方は「CSS3を使うにあたって知っておきたいIE対策のまとめ|Webpark」をご参考に。 それではHTMLから紹介します。 HTML <div id
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある(主に下ネタ)」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい(´ω`) さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle/fadeToggle/toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く