creating a simple accordion on a specific page
-
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.
-
Dear @mrrpringle
did you have a look here:
http://laytheme.com/documentation.html#custom-javascriptYou need to use jQuery in a specific way.
Best!
Marius
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it