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

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;アコーディオンパネル&lt;/title&gt;
&lt;link rel="stylesheet" href="css/style.css"&gt;
&lt;style&gt;
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 &gt; div &gt; dl &gt; dd:nth-child(6) {
	
	min-height: 450px;
}
	dd#ans2.good {
		color: red;
	}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;
  &lt;dl class="accordion"&gt;
    &lt;dt class="open"&gt;今日の日付・曜日&lt;/dt&gt;
    &lt;dd&gt;
      &lt;p id="ans" class="tody"&gt;&lt;/p&gt;
    &lt;/dd&gt;
    &lt;dt&gt;今日の運勢&lt;/dt&gt;
    &lt;dd id="ans2" class="today"&gt;ここにイベントの内容が入ります。&lt;/dd&gt;
    &lt;dt&gt;Google Map&lt;/dt&gt;
    &lt;dd&gt;
      &lt;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&gt;&lt;/iframe&gt;
    &lt;/dd&gt;
  &lt;/dl&gt;
&lt;/div&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script&gt;
$(function(){
  $( '.accordion&gt;dd:not(:first)' ).hide();

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

      $( 'dd' ).slideUp();

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

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

        $( this ).addClass( 'open' );
    }
  });
});
&lt;/script&gt; 

&lt;script&gt;
		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;
			
		}
	}	
		&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<!DOCTYPE html>

<head>

<title>アコーディオンパネル</title>

<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>

<dt class="open">今日の日付・曜日</dt>

<dd>

</dd>

<dt>今日の運勢</dt>

<dd id="ans2" class="today">ここにイベントの内容が入ります。</dd>

<dt>Google Map</dt>

<dd>

</dd>

</dl>

</div>

$(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>

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>

アコーディオンパネル

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30