スマホ向けHP div要素の開閉（アコーディオン）

質問

現在、スマホ向けのHPを作成しており、
添付のように、グラデ部分のバーをタップすると、
隠れている要素が、表示/非表示されるアコーディオンメニューを作成したいのですが、
簡単なHP制作の知識しかなく、困り果てており、
実装方法を知りたく、質問させていただきました。

何とぞよろしくお願いいたします。

やりたいこととしては、
（１）バー部分は常に横１００％で表示される。ベタ一色ではなく、添付のようにグラデーションをかける。
（２）バーのタイトルの頭にアイコン画像を表示させる
（３）開閉によって、右端の矢印アイコンも切り替わる
（４）隠れている要素は、テキストだったり画像だったり、コンテンツによって色々

参考にしたサイト
http://www.rurubu.com/season/spring/sakura/detail.aspx?SozaiNo=340004
（スマホ閲覧時）

以上何とぞよろしくお願いいたします。

回答No.1

ORUKA1951

スマートフォンだろうがPC用ブラウザだろうが基本的に同じ。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 ・・・【中略】・・・なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　わざわざ、スマホ用のページを作ることはありませんが・・・

（１）バー部分は常に横１００％で表示される。ベタ一色ではなく、添付のようにグラデーションをかける。
　html,body{margin:0;padding:0}
　div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
　div.nav ul li{background-image:url();line-height:20px;position:relative;}

（２）バーのタイトルの頭にアイコン画像を表示させる
　div.nav ul li:before{content:url();}
　div.nav ul li:after{content:url:position:absolute;right:0;}
（３）開閉によって、右端の矢印アイコンも切り替わる
　div.nav ul li ul{display:none;}
　div.nav ul li:hover:after,div.nav ul li:focus:after{content:url();}
　div.nav ul li:hover ul,div.nav ul li:focus ul{display:block;}

（４）隠れている要素は、テキストだったり画像だったり、コンテンツによって色々

　で良いかと・・それぞれのセレクタ・プロパティの意味は
★5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
★9. 視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html )
★10. 視覚整形モデル詳細 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )
★12. 生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
　に詳しいので省きます。

PC用と通常のブラウザのスタイルシートは
★[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ | コリス ( http://coliss.com/articles/build-websites/operation/css/css-framework-hardboiled-css3-media-queries.html )
　などを参考にする。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　その先のリンク先はともかく・・すくなくとも、トップページ(サイトのホームページ)に関しては、複数作成するのは無駄です。

お礼

返事が遅くなり申し訳ありません。
色々と情報をありがとうございました！
本当に助かりました。
まだ分からない箇所が多々あるので、調べつつやってみます。

遅くなってしまうかもしれませんが、また進捗を報告させて頂きます！