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

関連記事

no image

サイト制作に役立つTips_リンク集

目次1 スタイルなどの装飾1.1 ボタンのホバーアニメ1.2 角丸とシャドウのジェネレーター1.3 グラデーションジェネレーター1.4 CSS三角形作成ツール1.5 吹き出し作成のジェネレーター1.6 ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

cssでlistのborderを斜め線にする

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

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 目次1 まずはhtml2 つぎにcss3 cssの中身の解説4 高さ ...

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

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