creating a simple accordion on a specific page

[mrrpringle]

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.

[mariusjopen]

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