babrees Posted July 29, 2017 Share Posted July 29, 2017 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/ Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2017 Share Posted July 29, 2017 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. Link to comment Share on other sites More sharing options...
babrees Posted July 29, 2017 Author Share Posted July 29, 2017 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2017 Share Posted July 29, 2017 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now