• 締切済み

このサイトの動きJquery?どうすれば出来る?

http://www.nanaco-net.jp/faq/faq_nanaco.html 上記サイトの、「nanacoとは何ですか? ↓(オレンジ色)」 のオレンジ色↓をクリックすると、枠が下に広がり情報が表示されます。 このような動きは、どのようなもので実装されているのでしょうか? 方法・サンプル情報等ありましたら、教えてください。 どうぞよろしくお願いします。

  • CSS
  • 回答数2
  • ありがとう数2

みんなの回答

  • tkmojo
  • ベストアンサー率50% (105/207)
回答No.2

公開・配布されているものも結構あります。 http://web-pc.net/jquery010 http://kachibito.net/snippets/open-slide-panel このあたりをちょっといじれば使えると思います。

  • shockatz
  • ベストアンサー率80% (153/191)
回答No.1

ソースにはこう書いてあるね。 クリックされた要素をtoggleClassして、隣接要素をslideToggleしている。 もちろん、jQueryの基本的な機能です。 /* FAQ 単体での開閉動作 */ $('#faqContents div.question').click(function () { $(this).toggleClass('open'); $(this).next('div.answer').slideToggle('fast'); });

関連するQ&A

  • こんな動きができるJqueryを探しています。

    お客さまより、こんな動きができないか?と言われていろいろ探していたんですが、 全然見つからないので、こちらで質問させていただきます。 こちらのサイトの様な動きができるJqueryプラグインはありませんか? ↓↓↓↓ ---- 摂南大学様サイト http://www.setsunan.ac.jp/ ---- 左右の画像は透明にならなくてもかまいません。(むしろならないほうがいいです) メインの画像が1枚だけ切り替わるスライダーは沢山あるみたいなんですが、 この様に、左右の画像が表示され、なおかつ下のまるい図の色が変わるものが見つからずに、 とても困っています。 どなたか教えていただけませんか?

  • ハイレベルな動きのあるサイトを作るための勉強サイト

    マクドナルド http://www.mcdonalds.co.jp/ インターデコハウスの住宅 http://www.idh.co.jp/style/ ソニー http://www.sony.co.jp/ のようなとても動きのあるホームページを作りたいです。 私が分かるもの 『XHTMLとCSS』はだいたい 『Javascript』は部分部分 上記のホームページのような動きを実現するには Javascriptだけでできるんですよね?? こういったプログラムを作るために勉強をしたいのですが、 どのように勉強をしたらいいのか分かりません。 学校に通うなど余裕がないため おすすめサイトや本がありましたら教えて下さい。 私が使えるJavascriptのレベルは↓を一通りやったところです。 ~ JavaScript ~ JavaScript入門 http://www.ajaxtower.jp/js/ JavaScriptサンプル集 http://plusone.jpn.org/javascript/sample1.html イヌでもわかるJavaScript講座 http://www.red.oit-net.jp/tatsuya/java/index.htm 初心者のためのJavaScript講座 http://www.pori2.net/js/ jQueryもちょっとだけ… ~ jQuery ~ jQuery入門 (ver 1.3) http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html お願いします。

  • jQuery等で背景をフル表示+スライドショー

    http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は3枚で、3枚目の画像だけ、縦長になっているので、 背景が3枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 3枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか? jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。

    • ベストアンサー
    • CSS
  • jQuery:マウスオーバーで画像が切り替わる

    下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ================================== 1)メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 (スライドショーはなし) 2)メイン画像にはテキスト(説明文)も入れられる 3)メイン画像の下には、サムネイル画像も表示できる ================================== 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

    • 締切済み
    • CSS
  • 動画サイトのアーカイブを見ていたら動きが止まる

    http://gif-tv.tumblr.com/archive http://catleecious.tumblr.com/archive 上記は動画サイトのアーカイブですが、下の方にスクロールして、アーカイブを多く見ていたら、アーカイブの動きが止まってしまって、アーカイブをクリックしても、その動画にリンク出来ません。なぜでしょうか? PCは7の64ビットでIE11です。

  • jqueryでn件目以降を抽出するには? 

    instagramの画像一覧を作成しています。 画像数が多いので「もっと見る」ボタンで追加していくようにしました。 以下の参考サイトのサンプルをそのまま使用させてもらっています。 実装はうまくいきましたが、これを1~10件目までは読み込まずに、 11件目から表示させるようにしたいです。 参考サイトサンプルは以下 http://black-flag.net/jquery/20131119-4881.html 色々試していますがうまくいきません。 お願いします。  

  • 複雑なjQuery

    このサイトはjQueryを使用していると思いますが、色々な要素が入ってます。 どのようなサンプルを使用しているのか分かる方教えてください。 1.ロゴがばらばらにフェードインします。 2.下から上にページがスクロール(最初はスピードが速くて、最後は遅くスクロール)して トップページが表示されます。 3.ロールオーバー(回転)でメニューボタンが変化してます。 4.背景が何層かになっています。 5.ビデオの埋め込み jQueryは初めてなので初心者です。 このサイトはとてもカッコいいです。 このようなサンプルデータが書かれている参考サイトを教えてください。 サンプルデータをダウンロードしたいです。 クリスチャン ダダのサイト http://www.christiandada.jp/

  • html5とcss3、 jQueryで動きのあるメ

    html5とcss3、 jQueryで動きのあるメニューを作りたいと思っています。 いろんなサイトでサンプルを見て回ったのですが、僕が作りたいメニューに合うものは有りませんでした。 細かい事はもう少し自分で勉強してみますが、まずは初めが肝心ということでよろしくお願いします。 なお、tableは使わずにやりたいです。 全画面幅の80%をcontainerクラスの枠にし、センタリングします。 その内部に上から『header』『main』『sub』『footer』のクラスを配置します。 『header』クラスは、backgroundを指定し、left20%にjpeg画像のロゴを配置します。 『footer』クラスは、copylightクラスをセンターに置きます。 『sub』クラスは、画面が縦に長くなった時によくある≪ページのtopへ≫を置こうと思っています。 肝心の『main』クラスですが、この中にsidebar1クラスを幅20%で"float: left"指定、contentクラスが60%幅で"float: left"指定、残り20%がsidebar2クラスで"float: left"指定です。 sidebar1クラスの中のnavクラスで作られるメインメニューの縦に並んだ各li項目上にマウスが置かれた時に『header』クラスのjpeg画像のロゴの右側の何も無い部分にサブメニューを横に並べて表示させたいのです。 サブメニューの項目数は不定であるため、80%÷項目数ではなく、統一した幅にしたいです。 なお、メインメニューの項目をクリックするまでは、サブメニューは固定されず、クリックした段階でそのページに飛ぶとともにサブメニューは固定されるようにしたいです。と言っても、メニュー項目上にマウスを置けば、そこのサブメニューにしたいのですが.... そもそもこういう事は可能でしょうか。 jQueryは、出来れば使いたいですが、使わなくて出来るならそれでいいです。 なお、『sub』クラスが思った表示にならないのですが、こんな事は後回しで良いです。 とにかく、よろしくお願いします。 belatero.cmbc.jp

    • ベストアンサー
    • CSS
  • スマートフォンサイト

    NAVERのスマートフォンサイト(http://www.naver.jp/m/) にあるようなリストがあってその下に配置されている 『さらに読み込み・・』をタップすると他のリストが表示されるという 機能を簡単に実装できるライブラリ等があれば 教えていただきたいです。 また、そういったものがなければ別の実装方法をご教授いただければ と思います。 プログラム初心者のため、なんとかご協力いただきたいと 思っております。 よろしくお願いします!!

    • ベストアンサー
    • CSS
  • jQuery UIを使用した画像スライダーについて

    お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト@…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか? 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします!!