Click to reveal div with Javascript

Question

I have a page on my site where I display one block of content & give the option for the user to click 'See more' to reveal more.

Here's my current demo.

HTML:

<p>
<a href="#" id="category36SeeMore">See more</a>
</p>

<div class="category36">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>

Can someone give me some pointers in how to create a function for #category36SeeMore so it shows ALL divs with the class category36?

Does this answer your question? [Make text appear/disappear on button click](https://stackoverflow.com/questions/55442477/make-text-appear-disappear-on-button-click) — teddcp, Apr 09 '20 at 14:34
@tedd Thanks for the reply. Is it possible to apply this so it hits ALL div elements with the class name? — michaelmcgurk, Apr 09 '20 at 14:36

score 2 · Accepted Answer · answered Apr 09 '20 at 14:41

On category36SeeMore click, you can first get its id and then replace SeeMore from it like:

const id = this.id.replace('SeeMore', '')

So, that you can get the actual class name category36 from it. Then you can find all elements with that class using:

document.querySelectorAll('.' + id)

and finally using .forEach, change the display style for all elements to block to make all of them visible again.

Demo:

const btn = document.getElementById("category36SeeMore");
btn.addEventListener("click", function(e){
  e.preventDefault();
  const id = this.id.replace('SeeMore', '')
  document.querySelectorAll('.' + id).forEach(el=>el.style.display = 'block')
});

.category36 {
  margin: 5px;
  padding: .5rem;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;
  background: Skyblue;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;
}

<p>
<a href="#" id="category36SeeMore">See more</a>
</p>

<div class="category36">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>

That's fantastic. Thanks so much :-) – michaelmcgurk Apr 09 '20 at 14:46 — michaelmcgurk, Apr 09 '20 at 14:46

score 2 · Answer 2 · answered Apr 09 '20 at 14:49

2

You can use jquery.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#category36SeeMore").click(function(){
        $(".category36").css('display','block');
    });
});
</script>

answered Apr 09 '20 at 14:49

Dashzeveg Galbadrakh

666
1
8
22

1

Wow, thats' very neat. Thanks : ) – michaelmcgurk Apr 09 '20 at 15:16

Click to reveal div with Javascript

2 Answers2