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でlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 目次1 まずはHTMLでメニュー作成2 スタイル ...

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

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

no image

cssで作るタイトルやテキストの装飾色々メモ

目次1 タイトルの背景を斜めボーダーにしたい2 タイトルの左右に画像を配置3 タテキストにグラデーションをかけたい タイトルの背景を斜めボーダーにしたい 斜めボーダー背景。 色の組み合わせで色々な雰囲 ...

no image

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

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

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...