Lay Theme Forum

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

    creating a simple accordion on a specific page

    General Discussion
    2
    2
    494
    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.
    • M
      mrrpringle last edited by

      Hello,

      I've recently discovered the accordion feature and would love to implement this on my website as a button to hide/reveal information about my projects.

      I found a very minimal accordion solution on Codepen that I like: https://codepen.io/xengravity/pen/NPYzLY

      Now I'm trying to insert this code into my Laytheme website.

      I've copied the CSS in 'Custom CSS':

      #accordion li{list-style: none;}
      #accordion p{display:none;}
      #accordion .active{
      display:block;
      background:yellow;
      }

      And the Javascript in 'Custom <head> content':

      <script>
      $('#accordion li').click(function(){
      //hide inactive panels
      $(this).siblings().removeClass('active').children().removeClass('active');

      //display active panel
      $(this).addClass('active').children().addClass('active');
      

      })
      <script>

      I then copied the html and created a +HTML window on a specific page of my site and copied the HTML:

      <div id="accordion">
      <ul>
      <li class="active">Description
      <p class="active">bodyText</p></li>
      </ul>
      </div>

      But it's not working. I then copied the HTML in 'Custom <head> content' and was able to draw the accordion at the top of my screen, but there was no animation.

      What am I doing wrong here? How can I target this simple accordion in a specific page of my website? Feel like I am very close... Thank you for any and all feedback. I hope others who are new to coding will find this useful.

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

        Dear @mrrpringle
        did you have a look here:
        http://laytheme.com/documentation.html#custom-javascript

        You need to use jQuery in a specific way.

        Best!

        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
        B
        C

        Recent Topics

        • K

          Unable to update lay theme / to login wp admin

        • S

          Theme crashed - because of Polylang?

        • A

          New button feature not available

        • A

          carousel addon not working after update

        laytheme.com