Webサイト制作

投稿日:

クリック開閉のタグ[jQuery+css使用]

jQuery+cssを使用したクリック開閉のタグ。
簡単に設置できるのでお世話になっています。

jQueryのタグ

<script>
jQuery(function($){
  $('.box').hide();
  $('.title').click(function () {
    $(this).next('.box').slideToggle();
    $(this).toggleClass('open');
  });
});
</script>

cssのタグ

<style>
.title:hover{
  color: #999;
}
.title:after{
  content: "↓";
}
.title.open:after{
  content: "↑";
}
.box{
  background: #eee;
  padding: 10px;
}
</style>
参考サイトクリックで開閉するシンプルなアコーディオンメニュー

- Webサイト制作
-

関連記事

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...