-1

This code of mine is not working.

document.getElementById("information-read-more").addEventListener("click", function(){
    document.getElementsByClassName("read-more-less-inner").style.display= "block";
});

Trying to build a read more section of my HTML that hides on mobile and reappears when the user clicks a button.

The style sheet has a media query that sets the display to none on a div with the read-more-less-inner class when the window gets small enough. Im wanting this read more button to override the style I made and show it.

The event listener fires when I click it, just the style doesnt change.

I dont think it makes a difference but im doing the project in a wordpress page.

Nathan Adams
  • 1
  • 3
  • 1
    `getElementsByClassName` returns a `NodeList`, not a single element, and has no `style` property. –  Mar 22 '19 at 19:37
  • `document.getElementsByClassName("read-more-less-inner")[0].style.display` ....but honestly if it were me I'd probably put all of this functionality on the presentation layer in lieu of javascript and use like a hidden checkbox and the `:checked` pseudo class for the css to do the same and retain a11y and ARIA ability. :) – Chris W. Mar 22 '19 at 19:39
  • Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) –  Mar 24 '19 at 00:28

1 Answers1

-1

Amys comment was the solution. Thanks!

Changed it from a class to an ID and it works now.

Nathan Adams
  • 1
  • 3
  • 1
    Your answer can be improved by adding the updated code to the answer. You can accept your own answer after a time-limit and get some rep. I'll even toss an upvote your direction! :) –  Mar 22 '19 at 20:30