Hatena今日はテックアカデミーの第23回目のメンタリングの日でした。実は今回含めてあと2回のメンタリングで契約終了となります。作成中のWEBアプリはほぼほぼ完成したので追加機能の実装を行っています。それが開閉ボタンの作成です。今日はこの開閉ボタンの作り方を講師の方に支援してもらったので、それをメモしています。これはどういった時に使うかと言うと「詳細検索画面」の表示に使っています。詳しい検索をしたい方はこちら、という形でクリックしたら詳細検索画面をそのページ内に展開するようなイメージです。クリックしたら表示を切り替える、javascriptの実装部分クリックされたら出現する開閉ボタンのイメージこの実装の考え方は、クリックされるまではdisplay:noneで非表示にしておいて、クリックというイベントが発生したらJavaScriptで表示させる、という考え方です。以下の画面があって、「こだわり検索を開く」をクリックするとこのように検索画面が出現するようなイメージです。クリックしたら表示を切り替える、javascriptの実装部分まずCSSは以下のようにしています。#syosaikensakuというIDをdisplay:noneで設定しています。他のborder-topとかはボタンの見た目を定義しているだけです。padding:5px;}表示部分のHTMLは以下のようにしています。</div></div>javascriptはこのように記述しています。});});</script>IDでjQueryPushと指定しているdivタグの部分がクリックされたら、3ヶ所を表示/非表示を切り替えるようにしています。3ヶ所というのはなにかというと#syosaikensakuのdivタグの部分と、btn-kaihei.pngと、btn-kaihei2.pngです。それが以下の部分ですね。このこだわり検索を開くの部分がクリックされたらjavascriptが動くようになっています。src="/images/icon/btn-kaihei2.png"></span>また開閉を明示したいのとクリックするボタンだよ、と見せるためにアイコンを付けています。noneにして、クリックで両方にトグルをかけて、表示を下向きの画像と、上向きの画像と変えています。これで取り敢えず、ボタンによる開閉の実装が出来ました。いった処理はWEBの世界ではよくあると思うので、ここで学んでおけてよかったと思います。今回のは特にRails関係ない話ですので汎用的ですね。...テックアカデミー第17回メンタリング:ファイル選択ボタンの不具合を解消した流れ昨日はテックアカデミー第17回目のメンタリングでした。...テックアカデミーWEBアプリケーションコースのレッスン4はTerminal!なつい!まさかターミナルを学習するとは思いませんでした。...Railsでslickの画像スライドを使うと画面が飛んじゃうども。今日はテックアカデミーの第14回目のメンタリングです。Village」でインタビューさせていただきました!新着記事ネットワークエンジニアは「楽」と「きつい」が同居する仕事ネットワークエンジニアの方にヒアリングしたことがあります。...SESの闇はヤバいのか?やめとけと言われる理由とホントのところ今日はSESを中心に受託開発や自社開発の話をしたいと思います。ここにこのブログに寄せられるよくある質問を書いていきます。TOPグループサイト|Happiant。