Accordion won't open

[babrees]

First off, my knowledge is only on html and css, definitely not js!

I have reproduced the examples as per here: https://www.w3schools.com/howto/howto_js_accordion.asp

I eventually want to use it on a wordpress site, however, I am just trying to get it working to start with!

I made a simple html file and simply copied and pasted the examples, using the animated accordion, but I cannot get the sections to open!    I added the css and js into the header of the html file.

Link:  http://utterlydogs.com/accordion/

[dsonesuk]

Taking into account that the page is read from top to bottom, and in your pasted code? has JavaScript code that references the class name of elements with class 'accordion' above these specific element that have not been rendered YET! and so do not exist YET! that is why it does not work.

check how the example is compared to yours

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

See how the JS code is placed at bottom, the html specific class elements are rendered first, the JS can now reference them, to apply code.

 

[babrees]

Thank you!   That works with that html test, but do you know how I would get it to work in wordpress?

I made a separate .js file and called it within my functions.php file, but it wouldn't work; hence trying it out on a simple html page first

[dsonesuk]

You have to register the js file, then enqueue it, finally add the script, to where you have defined, i.e head or footer as shown here

https://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp-24321

Edited July 29, 2017 by dsonesuk