javascript - document.getElementByTagName を使用して特定のクラス名をターゲットにする方法

Question

ここにコードがあります。

<div class="container">
<div class="accordionHeader">
<h1 onclick="test()"></h1>
</div>
<div class="accordionContent" style="display:none">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>

class="accordionContent" を対象にして表示/非表示にしたい。document.getElementByTagName を使用してみましたが、class="accordionContent" をターゲットにする方法がわかりません。IDの使用は許可されていません。

あなたが私を助けてくれることを願っています。検索を試みますが、うまくいきません。

Answer 1

あなたはjqueryでこのようにすることができます

$('.accordionContent').show(); //to show


$('.accordionContent').hide(); //to hide

またはトグルでも機能します:)

$('.accordionContent').toggle(); //to hide and show 

$('.accordionContent').slideToggle(); //toggle with Animatation

$('.accordionContent').fadeIn(); //fadeIn with Animatation
$('.accordionContent').fadeOut(); //FadeOut with Animatation

快適に感じる方を選択してください:)

Answer 2

getElementByClassNameを使用して、accordionContentdivを次のように非表示/表示できます。

document.getElementsByClassName('accordionContent')[0].style.display="show";  // to show

document.getElementsByClassName('accordionContent')[0].style.display="show";  // to hide