Custom Javascript question

clineker

Hi there,

I have read the other threads about adding an accordion with custom script but they still don't seem to help my problem.
I am trying to add this Accordion to my site

https://www.w3schools.com/howto/howto_js_accordion.asp

I currently have:

In the project and under +more - +HTML I have

 <button class="accordion">Section 1</button>
 <div class="panel">
 <p>COPY INSIDE TAB</p>
 </div>

Under Custom CSS for Desktop Version

.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;
}

.active, .accordion:hover {
background-color: #ccc; 
}

.panel {
padding: 0 18px;
display: none;
background-color: white;

And finally in my Custom <head> content

    <script>
    window.laytheme.on("newpageshown", function(){
    }   
    var acc = document.getElementsByClassName("accordion");
    var i;

   for (i = 0; i < acc.length; i++) {
   acc[i].addEventListener("click", function() {
   this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
        panel.style.display = "none";
    } else {
        panel.style.display = "block";
    }
    });
    } 
    </script>

Would you be able to let me know what I am doing wrong? The panel is appearing fine - its the Javascript thats not working.

Regards

Chris

mariusjopen

Hi @clineker

I would recommend to use a simpler version of an accordeon. With jQuery:
https://jsfiddle.net/harrisonstatham/WvtEw/

This code with the loop looks a bit oldschool.

Have a look here how you bind 'click events:
http://laytheme.com/documentation.html#custom-javascript

Good luck!

Marius

clineker

@clineker said in Custom Javascript question:

<div class="panel">

Hi @mariusjopen Marius,

Thank you for your quick reply!

I am only just getting into using JQuery and so am a little confused as to where I am inserting JQuerys "on" function.

I currently have in my Javascript as:

     <script>

    window.laytheme.on("newpageshown", function(){
      // display the first div by default.
      $jQuery("#accordion div").first().css('display', 'block');


     // Get all the links.
    var link = jQuery("#accordion a");

     // On clicking of the links do something.
      link.on('click', function(e) {

      e.preventDefault();

      var a = jQuery(this).attr("href");

       jQuery(a).slideDown('fast');

      //jQuery(a).slideToggle('fast');
       jQuery("#accordion div").not(a).slideUp('fast');

       });
      </script>

Taken from the above link and replacing the dollar sign with JQuery.

If you could help me, I would be massively appreciated.

The page im trying to get it to work on is

www.chrislineker.space/test

Hope to hear form you soon

Chris

clineker

UPDATE:

Firgured it out guys!

My Javascript ended up looking like the below

 <script>

 // display the first div by default.
 jQuery("#accordion div").first().css('display', 'none');

 // Get all the links.
 var link = jQuery("#accordion a");

 // On clicking of the links do something.
      jQuery(document).on("click",".accordion a", function(e) {

     e.preventDefault();

     var id = jQuery(this).attr('href');
   jQuery(id).slideToggle();
 });
 </script>

Thanks for all the help !

Cheers

Chris

mariusjopen

Hi Chris!

Glad you figured that out!

Happy to hear!

Marius