<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<style>@charset "UTF-8";
/*==================================================
アコーディオンのためのcss
===================================*/
/*アコーディオン全体*/
.accordion-area {
list-style: none;
width: 96%;
max-width: 900px;
margin: 0 auto;
}
.accordion-area li {
margin: 10px 0;
}
.accordion-area section {
border: 1px solid #ccc;
border-radius: 5px;
background: rgba(243, 243, 243, 0.3);
}
/*アコーディオンタイトル*/
.title {
position: relative; /*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size: 1rem;
font-weight: normal;
padding: 3% 3% 3% 50px;
transition: all 0.5s ease;
}
/*アイコンの＋と×*/
.title::before,
.title::after {
position: absolute;
content: "";
width: 15px;
height: 2px;
background-color: #333;
}
.title::before {
top: 48%;
left: 15px;
transform: rotate(0deg);
}
.title::after {
top: 48%;
left: 15px;
transform: rotate(90deg);
}
/* closeというクラスがついたら形状変化 */
.title.close::before {
transform: rotate(45deg);
}
.title.close::after {
transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box {
display: none; /*はじめは非表示*/
background: rgba(243, 243, 243, 0.5);
margin: 0 3% 3% 3%;
padding: 3%;
border-radius: 5px;
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 30px 0;
/*背景画像設定*/
background: url("/wp-content/uploads/demos/_assets/img_02.jpg") no-repeat
center;
background-size: cover;
}
h2 {
text-align: center;
margin: 30px 0;
font-size: 1rem;
}</style>
</head>
<body>
<body>
<ul class="accordion-area">
<li>
<section>
<h3 class="title">お見積もりの目安を教えてください。</h3>
<div class="box">
<p>内容によって変化いたしますのでまずはお問い合わせフォームよりご相談ください。</p>
</div>
</section>
</li>
<li>
<section>
<h3 class="title">地方ですが発注は可能でしょうか</h3>
<div class="box">
<p>可能です。お気軽にご相談ください。</p>
</div>
</section>
</li>
<li>
<section>
<h3 class="title">セミナーやイベントの出演を依頼したいのですが</h3>
<div class="box">
<p>お問い合わせフォームより日時や内容などをご記入いただきご相談ください。</p>
</div>
</section>
</li>
</ul>
<script>//アコーディオンをクリックした時の動作
$(".title").on("click", function () {
//タイトル要素をクリックしたら
var findElm = $(this).next(".box"); //直後のアコーディオンを行うエリアを取得し
$(findElm).slideToggle(); //アコーディオンの上下動作
if ($(this).hasClass("close")) {
//タイトル要素にクラス名closeがあれば
$(this).removeClass("close"); //クラス名を除去し
} else {
//それ以外は
$(this).addClass("close"); //クラス名closeを付与
}
});
//ページが読み込まれた際にopenクラスをつけ、openがついていたら開く動作※不必要なら下記全て削除
$(window).on("load", function () {
$(".accordion-area li:first-of-type section").addClass("open"); //accordion-areaのはじめのliにあるsectionにopenクラスを追加
$(".open").each(function (index, element) {
//openクラスを取得
var Title = $(element).children(".title"); //openクラスの子要素のtitleクラスを取得
$(Title).addClass("close"); //タイトルにクラス名closeを付与し
var Box = $(element).children(".box"); //openクラスの子要素boxクラスを取得
$(Box).slideDown(500); //アコーディオンを開く
});
});
//# sourceURL=pen.js</script>
</body>
</html>