CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ray
ray

Reputation: 95

how to use document.getElementByTagName and target specific class name

I have code here.

<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>

I want to target and show/hide class="accordionContent". Ive tried using document.getElementByTagName but I dont know how to target the class="accordionContent". Im not allowed to use id.

Hope you could help me. Tries searching but no luck.

Upvotes: 0

Views: 159

Answers (2)

Jamir Khan
Jamir Khan

Reputation: 397

You can use getElementByClassName and hide/show accordionContent div as follow:

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

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

Upvotes: 0

Ravi Gadag
Ravi Gadag

Reputation: 15861

you can do like this with jquery 

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


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

or even toggle can work :) 

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

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

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

choose any one, which ever you feel comfortable :)

Upvotes: 2

Related Questions