jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
CSS（CSS3）のみでアコーディオンUIの作成方法｜BLACKFLAG
Webサイト上で今では頻繁に見かけるアコーディオンUI。 この動作は基本的にはJavaScriptやjQueryなどスクリプトを使って実装することになりますが、 CSS3アニメーションだとスクリプトを使わずにCSSのみでアコーディオンUIを実装することが可能になります。 今回はそんなアコーディオンUIをCSSのみで実装する方法を紹介してみます。 まずは動作サンプルから。 ※動作環境はWebkitブラウザのSafariやChromeのみです！！！ CSS3 ACCORDION ≫アンカーリンクが効いてしまって、うまく動作が見れない場合はこちらから 各リスト（リンク）をクリックするとアコーディオン形式でコンテンツが表示されます。 クリック後、現在アクティブな状態のリストに対しては背景色等も変化させています。 内部構成について。 まずはHTMLソース。 ◆HTML <dl id="content
モバイル用に:targetや:checkedでつくるPure HTML5/CSS3なアコーディオンについて（追記 :checked版でAndroid4.x対応の改良コード）
Pure HTML5/CSS3のロマン ただしモバイルデバイスに限る。 しばしば話題にあがるHTML5/CSS3による気合戦法のアコーディオン（ないしクリッカブルなパーツ）を、モバイルデバイスでの動作をiOSおよびAndroidを中心に記述・検証してみました。 今のところメジャーなのは、:target戦法と:checked戦法だと思うので、それぞれ試しています。これらの擬似クラスを使って、状態制御を行いつつセレクタで表示状態のスタイルを適用します。 :target戦法 :target擬似クラス+アンカーリンクで状態を制御しながら、子要素としてコンテンツを表示させる方法。わりと手軽に使えるので、使い所さえ選べば良いのかも。 サンプル コード全体 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name=
CSSだけ！クリックでスムーズに開閉するアコーディオンメニュー
この前「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事を書きました。jQueryでしそうなことをCSSのみで作ったのですが、これはマウスを乗せたとき動くようにしたいのでhoverを使いました。 今回はクリックで開閉するということで、hoverは使えません。では何を使うのか。 ラジオボタンを使います。ある項目にチェックするとそれまでチェックされていた項目のチェックが外れる。アコーディオンメニューと仕組みが一緒です。 今回もサンプルを用意していますのでご覧ください。 IE8以下の場合「:checked」が非対応なのでうまく表示されません。しかし、CSS3セレクタはSelectivizrを使えば簡単に対応できます。使い方は「CSS3を使うにあたって知っておきたいIE対策のまとめ｜Webpark」をご参考に。 それではHTMLから紹介します。 HTML <div id
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
