アコーディオンパネルで、表示・非表示

アコーディオンパネルで、表示・非表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンパネル</title>
<link rel="stylesheet" href="css/style.css">
<style>
html, body, h1, h2, h3, h4, p dl, dt dd, ul, li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
}
body {
	background: #FFF;
	font-size: 16px;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.accordion {
	max-width: 960px;
	margin: 50px auto;
}
.accordion dt {
	background: #0d6552;
	border-bottom: 1px solid #FFF;
	cursor: pointer;
	padding: 12px 1em 10px 1em;
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.accordion dd {
	margin: 0;
	border: 1px solid #7CADB6;
	border-top: none;
	height: 160px;
	padding: 1em;
	text-align: center;
	font-weight: 600;
    font-size: 2rem;
}
dt.open {
	background: #4b1211;
}
body > div > dl > dd:nth-child(6) {
	
	min-height: 450px;
}
	dd#ans2.good {
		color: red;
	}
</style>
</head>
<body>
<div class="container">
  <dl class="accordion">
    <dt class="open">今日の日付・曜日</dt>
    <dd>
      <p id="ans" class="tody"></p>
    </dd>
    <dt>今日の運勢</dt>
    <dd id="ans2" class="today">ここにイベントの内容が入ります。</dd>
    <dt>Google Map</dt>
    <dd>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.011443775643!2d139.71169151525993!3d35.725937080183996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d69a1bee285%3A0x37645a2f7b008238!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yR77yS4oiS77yZ!5e0!3m2!1sja!2sjp!4v1550042966689" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
    </dd>
  </dl>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>
$(function(){
  $( '.accordion>dd:not(:first)' ).hide();

  $( '.accordion>dt' ).on( 'click', function() {
    if( $( this ).next().css( 'display' ) == 'none' ) {

      $( 'dd' ).slideUp();

        $( 'dt' ).removeClass( 'open' );

      $( this ).next().slideDown();

        $( this ).addClass( 'open' );
    }
  });
});
</script> 

<script>
		window.onload = function() {
		var now = new Date();
		var year = now.getFullYear();
		var month = now.getMonth()+1;	
		var date = now.getDate();
		var day = now.getDay();
		var week = ['日','月','火','水','木','金','土','日'];
		var element = document.getElementById('ans');
		var str = '今日は' + year + '年'+ month +'月'+ date +'日'+ week[day] + '曜日です。';
			element.textContent = str;
		
		
		var fortune = ['大吉','中吉','小吉','吉','凶'];
		var rnd = Math.floor(Math.random()*fortune.length);
		var element2 = document.getElementById('ans2');
		var str2 = fortune[rnd];
		if (rnd === 0) {
			element2.classList.add('good');
			element2.textContent = str2;
		} else {
			element2.classList.remove('good');
			element2.textContent = str2;
			
		}
	}	
		</script>
</body>
</html>
アコーディオンパネル
タイトルとURLをコピーしました