bottlez Posted June 30, 2016 Share Posted June 30, 2016 I'm building a simple according from a w3 guide and I can't seem to get it to work on my wordpress website. Guide: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol I continue to get this error: (index):474 Uncaught TypeError: Cannot read property 'classList' of nullacc.(anonymous function).onclick @ (index):474 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function () { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } I'm just learning javascript so I'm new to this but I can't see what is wrong with this code. Active works just fine but the stuff highlighted in red keeps giving me errors and nothing drops down. Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2016 Share Posted June 30, 2016 The code works in the W3Schools example, so your code must be in a context where something is not working. I need to see the full context to know what's not working. It sounds like the element does not have a nextElementSibling, so your HTML structure might be incorrect. Link to comment Share on other sites More sharing options...
bottlez Posted June 30, 2016 Author Share Posted June 30, 2016 The code works in the W3Schools example, so your code must be in a context where something is not working. I need to see the full context to know what's not working. It sounds like the element does not have a nextElementSibling, so your HTML structure might be incorrect. <div class="entry-content"> <p><button class="accordion">How do I make a decent website?</button></p> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <p><button class="accordion">Why don’t pigs fly?</button></p> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <p><button class="accordion">How will I ever leave this awesome place?</button></p> <div id="foo" class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> I took the html directly from the w3 just to test it and I'm still getting the same problem. Here is my html code. Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2016 Share Posted June 30, 2016 Your button is wrapped in a <p> element, so there is no sibling element to it. If you remove the <p> tags it will work. That's the wrong place to use a <p> tag, <p> is meant to represent a paragraph, if you want margins on the button add them with CSS. Link to comment Share on other sites More sharing options...
bottlez Posted June 30, 2016 Author Share Posted June 30, 2016 (edited) Your button is wrapped in a <p> element, so there is no sibling element to it. If you remove the <p> tags it will work. That's the wrong place to use a <p> tag, <p> is meant to represent a paragraph, if you want margins on the button add them with CSS. Thanks so much for the suggestion but I'm getting the same error: (index):476 Uncaught TypeError: Cannot read property 'classList' of nullacc.(anonymous function).onclick @ (index):476 Could it possibly be that I don't have some header file included for javascript or something? W3 would have done that automatically. Edited June 30, 2016 by bottlez Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2016 Share Posted June 30, 2016 It's the same issue, show your updated HTML. Link to comment Share on other sites More sharing options...
bottlez Posted June 30, 2016 Author Share Posted June 30, 2016 It's the same issue, show your updated HTML. Wow you solved my problem!! That's amazing! Wp was automatically formatting it into paragraphs. Thanks stranger! Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2016 Share Posted June 30, 2016 I would turn off the WYSIWYG editor when building pages. 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