|
1 |
<!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&gt; |
こちら
WEB便利