htmlでの表示・非表示の切り替えについて

Question

htmlでの表示・非表示に関する質問です。

<div class="hidden-box">
            <label for="label-software">ソフトウェアデザイン</label>
            <input type="checkbox" id="label-software"/>
            <div class="hidden-show">
              <p><img src="../images/software.png"></p>
            </div>
</div>

	.hidden-box input {
		display: none;
	}

	.hidden-box .hidden-show {
		height: 0;
		padding: 0;
		margin: 0;
		overflow: hidden;
		opacity: 0;
		transition: 0.8s;
	}

	.hidden-box input:checked ~ .hidden-show {
		padding: 0;
		height: auto;
		opacity: 1;
	}

このようにhtml上で記述し、hidden-show 部分の内容の表示・非表示の切り替えを行なっているのですが、
同じhtml内にボタンを設置し、hidden-show部分まで移動して、さらに表示も行うことは可能でしょうか？
(ボタンはページ内の上部に、hidden-boxはページ内の下部に設置しています)

現在の設計では、ボタンを押すと #software　まで飛ぶようになっています。(図を追加しました)

可能な場合どのように記述すればよいでしょうか？

ご回答頂けますと幸いです。
よろしくお願いいたします。

Comments

[m.ts10806]

>可能でしょうか？
という質問の仕方だと「可能です」という回答になりますが。
質問の仕方で回答の方向性が変わるのでそこは「回答する人の立場にたって」質問していただけると答えやすい質問が得られるようになります。

[babylily4]

質問の仕方を間違えてしまい、申し訳ありません。
方法を教えて頂けますと幸いです。

[m.ts10806]

ただ、「同じhtml内にボタンを設置し、hidden-show部分まで移動」というのが今一つイメージができません。
提示はないですが既にボタンはあるわけですよね。「ボタンを押す」というアクションが発生する前提ですとJavaScriptの話になりますし。
図示いただけますか？

[babylily4]

この図でご理解頂けますでしょうか、、？

Answer 1

結局jsは使ってますが

<a href="#software" onclick="document.getElementById('label-software').checked = document.getElementById('label-software').checked ? false : true ;">

Comments

[babylily4]

ありがとうございます！大変参考になりました！