Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Custom Javascript question

    General Discussion
    2
    5
    928
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      clineker last edited by

      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

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        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

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • C
          clineker last edited by 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

          1 Reply Last reply Reply Quote 0
          • C
            clineker last edited by

            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

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Hi Chris!

              Glad you figured that out!

              Happy to hear!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Before you post

              Use the Search Feature. Maybe there is already a solution to your issue.

              1. Update Lay Theme and all Lay Theme Addons
              2. Disable all Plugins
              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
              4. Now see if your problem solved itself
              5. Go here, see if your problem is listed here:
              Troubleshooting

              When you post:
              1. Post a link to where the problem is
              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

              Thanks!

              Online Users

              A

              Recent Topics

              • A

                Unable to update lay theme / to login wp admin

              • A

                New button feature not available

              • S

                Theme crashed - because of Polylang?

              • A

                carousel addon not working after update

              laytheme.com