Animated Accordion [closed]

Question

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:

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.

Answer 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.