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.
