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

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

タイトルの背景を斜めボーダーにしたい 斜めボーダー背景。 色の組み合わせで色々な雰囲気がつくれる。 ただ、背景に柄が入ると中のテキストが読みにくくなるので、色は注意! HTMLは入れ子にしています。 ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

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

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

Amazon Product Advertising APIを使って気づいた事

APIの使い方が分からない時は Product Advertising APIの使い方が分からない時は、ドキュメントを見てみます。英語だけど、ページの翻訳で何となく分かる箇所があります。 APIのdo ...

no image

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

スタイルなどの装飾 ボタンのホバーアニメ バリエーションが豊富です。デザインのヒントに 【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ 角丸とシャドウのジェネレーター 見た目で調節した ...