-1

I am trying to create a filtering system for a portfolio site in wordpress (using the Divi Builder) and would love to be able to make a button/buttons to set elements with specific classes on a page to display: none when the button is clicked on. If anyone has ideas on how this can be done that would be super appreciated.

Thanks

Rohan Gerrard
  • 1
  • 2

1 Answers1

0

If you can use jQuery, the .show() and .hide() Functions work on jQuery objects.
For example $('.dataholder').hide().filter( (index,element) => $("body").innerHTML == "abc" ).show() will hide all nodes with class dataholder and then show those containing abc.

Otherwise you have to use something like

element = document.querySelector('#dataholder')
element.style.display = 'none'

Or

elements = document.querySelectorAll('.dataholder')
elements.forEach( element => element.style.display = 'none' )
Redjard
  • 36
  • 4
  • Thanks for the support, I've tried to follow along your suggestions and a few tutorials. I've done this but not sure why it isn't working. Any thoughts on what I did wrong? `` – Rohan Gerrard Apr 25 '21 at 07:52
  • You have to use querySelector or forEach. querySelectorAll yields multiple objects, js doesn't support setting individual properties of the contained objects like that. `document.querySelectorAll("#dreamseeds, #angelaart, #sdc, #ytv, #intime, #wherenext").forEach( element => element.style.display = "block" );` – Redjard Apr 26 '21 at 08:06
  • I would really recommend you to get jquery, if you at all can. It will make some things like this a lot easier for beginners. – Redjard Apr 26 '21 at 08:09