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