-2

Simple question with a lot of explanation.

I am trying to implement an accordion script in my Wordpress theme. I am using w3schools example as a starting point but I have some problems getting it to work.

This is what I have done so far:

This is how I load my scripts in functions.php:

function alepscript() {
    wp_enqueue_script( 'alepscript', get_template_directory_uri() . '/js/alep.min.js', array( 'jquery' ), '1.0.0', true );

    wp_enqueue_script( 'dotdotdot', get_template_directory_uri() . '/js/dotdotdot.min.js', array( 'jquery' ), '1.8.3', true );
}
add_action( 'wp_enqueue_scripts', 'alepscript', 'dotdotdot' );

(alep.min.js is where I include the script)

This is how I have added the script:

(function($) {
  alert("Accordion script loaded");
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
})(jQuery);

I have added (function($) {} because I previously read that this is required for jQuery scripts in WordPress. I have also added alert("Accordion script loaded"); just to be sure that the script is loading.

CSS:

button.accordion{background-color:#eee;color:#444;cursor:pointer;padding:18px;width:100%;border:none;text-align:left;outline:none;font-size:15px;transition:0.4s;}
button.accordion.active,
button.accordion:hover{background-color:#ddd;}
div.panel{padding:0 18px;background-color:white;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out;}

Markup:

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</button>
<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>

<button class="accordion">Section 2</button>
<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>

<button class="accordion">Section 3</button>
<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>

This is what I get: enter image description here

If I try to click on one of the sections, nothing happens except an error in the console. I am not sure what this means or how to fix it, or if it is even the problem.

closed as off-topic by cjbj, Dave Romsey, Pat J, bueltge, Max Yudin Mar 8 '17 at 14:27

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • Hi, You should consider asking this on StackOverflow instead. This has nothing to do with WordPress. – Jack Johansson Feb 19 '17 at 12:23
1

Since you already loading JQuery, add the following $('document'):

(function($) {

$(window).load(function() { //lets wait for all to be loaded

  alert("Accordion script loaded");
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    }
  }

});

})(jQuery);

looks like document.getElementsByClassName("accordion"); its returning NULL and you are trying to set the style property of it, this due to the script running too early, so nothing is found.

  • That might be... So what should I do? – Arete Feb 19 '17 at 2:12
  • i updated your JS code with $('document') – David Lee Feb 19 '17 at 2:13
  • I tried your code. I still get Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement.s.(anonymous function).onclick. I have made sure that the script is loaded last in the DOM. – Arete Feb 19 '17 at 10:12
  • ok, i updated with $(window).load(function() { is this a plain template you are using to show the markup? – David Lee Feb 19 '17 at 12:11
  • @Arete after I tested your code, and using your script nothing happens, however if I used what is provided by David, then everything seems great. I think David pointed out what causes the problem. – Den Isahac Feb 19 '17 at 12:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.