addEventListener('click')時に複数の現象を起こしたい。

Question

前提・実現したいこと

javascript初心者です。

ニュースページを作るにあたり、<label>部分をクリックすると<img>アイコンが回転しかつoverflow:hidden部分が隠れる仕様で作りたいと考えています。(最初は露出→クリックしたら隠れる）

前回、アイコンが回転するjavascriptについてはご教授頂いたんですが、
やはりlabel部分ともリンクをさせたく、また質問させていただきます。

基礎的な話だとは思いますが、よろしくお願いいたします。

該当のソースコード

<label for="2021" class="label">
     <img src="common/images/hover.png" alt="詳細" class="img">
     <h3>2021年</h3>
</label>
<input type="checkbox" id="2021"/>
<div class="hiddenshow">
     <dl>
        <dt></dt>
        <dd></dd>
     </dl>

 .label{
	cursor :pointer;
	width: 100%;
	height: 7rem;
	}
.label h3{
	padding-left: 3rem;
	}
input{
	display: none;
	}
.hiddenshow{
	height: auto;
   	padding: 0;
        overflow: hidden;
    	opacity: 1;
    	transition: 0.8s;
	}
input:checked ~ .hiddenshow {
    	padding: 10px 0;
    	height: auto;
    	opacity: 0;
	}
.img.active{
	transform: rotate(-90deg);
	}

<script>
const img = document.querySelector('.img');
img.addEventListener('click', () => {
img.classList.toggle('active');
document.querySelector('.hiddenshow').style.display = "none";
});
</script>

Comments

[退会済みユーザー]

コードは ``` と ``` で囲ってください（``` はバッククォート 3 つ）。インデントされて見やすくなるので。インデントされてないコードは質問者さん自身も読む気がしないのでは？　赤の他人の閲覧者・回答者はなおさらです。見てもらわないと話が始まらないのだから見てもらえる努力をしませんか。

[komatta...]

修正しました。初心者で申し訳ない。

[退会済みユーザー]

今は img 要素をクリックして期待通りの動きをするのですか？　そこを、img 要素を囲んでいる label 要素をクリックしたときに同じように動作させたいと言ってますか？

[komatta...]

説明がわかりづらく恐縮です。
今はimg要素が回転されない状況です。仰っているような仕様にしたいです。

[退会済みユーザー]

> 今はimg要素が回転されない状況です。

質問に、

> 前回、アイコンが回転するjavascriptについてはご教授頂いたんですが、

と書いてあったので、質問のコード（img をクリック）で期待していることができていると思っていたのですが・・・

[komatta...]

回答者様のご指摘でjavascript最終行の記述を直したら、アイコン部分は回転するようになりました。
.style.display = "none";

ただいまだ.img要素ないしlabel要素をクリックしてもhiddenshow部分は表示・非表示ができない状況です。

Answer 1

.hiddenshow部分が表示・非表示されない状況

hidden にしかしていないので非表示のままになってしまうのは当然です。
img のように classList.toggle() を使用すれば表示非表示ができます。

サンプルを作ってみたので参考にしてみてください。（ややこしくなるので checkbox は一旦外しました。）

<label for="2021" class="label">
  <img src="http://placehold.jp/150x150.png" alt="詳細" class="img">
  <h3>2021年</h3>
</label>
<div class="hiddenshow">
  <dl>
    <dt>aaaa</dt>
    <dd>bbbbb</dd>
  </dl>
</div>

.label {
  cursor: pointer;
  width: 100%;
  height: 7rem;
}

.label h3 {
  padding-left: 3rem;
}

input {
  display: none;
}

.hiddenshow {
  height: auto;
  padding: 0;
  overflow: hidden;
  opacity: 1;
  transition: 0.8s;
}

.img.active {
  transform: rotate(-90deg);
}

.hiddenshow.hide {
  display: none;
}

const label = document.querySelector('.label');
const img = document.querySelector('.img');
const hiddenshow = document.querySelector('.hiddenshow');

label.addEventListener('click', () => {
  img.classList.toggle('active');
  hiddenshow.classList.toggle('hide');
});

Comments

[komatta...]

ありがとうございました！完璧な動きです。ご丁寧な回答のおかげでjavascriptとcssの関係が少し理解できたような気がします。初歩的な話にお付き合いいただいて感謝です。

Answer 2

.style.display:none;

プロパティの指定の仕方が間違っています。
プロパティ=値
です。
※リンク先参照

Comments

[komatta...]

ありがとうございます。JavaScriptの最終行ですよね？
.style.display = "none";　に修正しました。
ですが、やはりimg要素の回転ばかりで、.hiddenshow部分が表示・非表示されない状況です。

Answer 3

const img = document.querySelector('.label');

ってことですか？

Comments

[komatta...]

```JavaScript前半
const img = document.querySelector('.img');
img.addEventListener('click', ```

```JavaScript後半
img.classList.toggle('active');
document.querySelector('.hiddenshow').style.display:none;
});```

前半部分、imgアイコンをクリック後に、
後半部分二つの現象を起こしたいという意図で書きましたが、
ご指摘の通り、.label　でもできそうですね。動けばどちらでも大丈夫です。