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サイト制作
-

関連記事

amazon APIのBrowseNode ID一覧ってどうやって調べるの?

目次1 amazon APIのBrowseNodeID1.1 BrowseNodeって?1.2 まずは必要情報を入力2 本4656103 ドラッグストア 1616690114 ホーム&キッチン ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

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

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

no image

画像の拡大表示(ポップアップ)

目次1 やりたいこと2 タグを設置3 画像にクラスを付与4 スクリプトを記載5 スタイルを記載6 完成! やりたいこと 画像のポップアップがしたい! タグを設置 html内であればどこでも良いので、ポ ...

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 目次1 まずはhtml2 cssを追加します。3 テキストの背景指定も まずはhtml 何でもいいので適当なクラスか何かあた ...