Jump to content

Having issues with according FAQ page.


bottlez

Recommended Posts

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

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

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

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

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 by bottlez
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...