前提・実現したいこと
javascript初心者です。
ニュースページを作るにあたり、<label>部分をクリックすると<img>アイコンが回転しかつoverflow:hidden部分が隠れる仕様で作りたいと考えています。(最初は露出→クリックしたら隠れる)
前回、アイコンが回転するjavascriptについてはご教授頂いたんですが、
やはりlabel部分ともリンクをさせたく、また質問させていただきます。
基礎的な話だとは思いますが、よろしくお願いいたします。
該当のソースコード
HTML
1<label for="2021" class="label"> 2 <img src="common/images/hover.png" alt="詳細" class="img"> 3 <h3>2021年</h3> 4</label> 5<input type="checkbox" id="2021"/> 6<div class="hiddenshow"> 7 <dl> 8 <dt></dt> 9 <dd></dd> 10 </dl>
css
1 .label{ 2 cursor :pointer; 3 width: 100%; 4 height: 7rem; 5 } 6.label h3{ 7 padding-left: 3rem; 8 } 9input{ 10 display: none; 11 } 12.hiddenshow{ 13 height: auto; 14 padding: 0; 15 overflow: hidden; 16 opacity: 1; 17 transition: 0.8s; 18 } 19input:checked ~ .hiddenshow { 20 padding: 10px 0; 21 height: auto; 22 opacity: 0; 23 } 24.img.active{ 25 transform: rotate(-90deg); 26 }
javascript
1 2<script> 3const img = document.querySelector('.img'); 4img.addEventListener('click', () => { 5img.classList.toggle('active'); 6document.querySelector('.hiddenshow').style.display = "none"; 7}); 8</script>
回答3件
あなたの回答
tips
プレビュー