CSS animation on click

Question

I am working on a website and I have css animations for dropdowns but I want them to show up on click instead of on hover on the sub menu and cant seem to figure it out here is the code I am currently working with Sorry about all the PHP mixed in I copied it straight from the source. http://codepen.io/anon/pen/PwrNaZ

  $( "#horiz-menu ul li > ul" ).click(function()

I Dont know jQuery very well but this is what I have so far.

Answer 1

You can do something like this using JQuery:

JQuery

$( "#horiz-menu a" ).click(function(e){
   $(this).next('ul').toggleClass('active');
});

CSS

#horiz-menu ul.active {
   opacity: 1;
   visibility: visible;
   margin: 0;
 }

Heres a fiddle.

https://jsfiddle.net/hw9fsLb2/1/

Answer 2

Try this:

$( "#horiz-menu ul li > ul" ).click(function(){
$( "#horiz-menu li" ).toggle( "slow" );
});