JavaScript Compatibility

Hello,

I am building a mega menu and it involves javascript. I have read some your forums and you say to place it in a hook and display after_footer. This is not working at all.

How can we get the block to accept javascript code. I even installed code embed and that did not work either. How do I use this javascript code with hooks?

Please help me :).

LAYOUT CODE

<div class="toggler">
<a href="#" aria-label="">Discovery Bible</a>
<span class="toggle-btn">
<i class="fa fa-bars"></i>
</span>
</div>

<ul class="toplevel">
 	<li class="submenu-holder">Home
<div class="submenu">
<ul>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
</ul>
<ul>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
</ul>
<ul>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
 	<li><a href="#" aria-label="">sub item</a></li>
</ul>
</div></li>
 	<li class="submenu-holder">Bible Project
<div class="submenu">
<ul>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
</ul>
<ul>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
</ul>
<ul>
 	<li><a href="#" aria-label="">sub a</a></li>
 	<li><a href="#" aria-label="">sub a</a></li>
</ul>
</div></li>
 	<li class="submenu-holder">Bible App
<div class="submenu">
<ul>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
</ul>
<ul>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
</ul>
<ul>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
 	<li><a href="#" aria-label="">sub b</a></li>
</ul>
</div></li>
</ul>
<script>
$('.submenu-holder a').click(function(){
$('.submenu-holder').removeClass('.openMenu');
$(this).parent().toggleClass('openMenu');
	$('.openMenu .submenu').toggleClass('displayMenu');
})
$('.toggle-btn').click(function(){
$('.submenu-holder').removeClass('.openMenu');
$('.submenu').removeClass('displayMenu');
$('.toplevel').toggle();
})
</script>