toggleClass not working as expected

1

I’m trying to create a dropdown using CSS, HTML, and Jquery and I want to activate the dropdown when clicked by using toggleClass. It should toggle class to ‘active’ which should, according to the css, "transform: perspective(1000px) rotateX(0deg); " essentially making it dropdown when clicked, and viceversa. Please let me know what I’m missing to make it work.

 <body style="background-color:white;">
     <div class="dropdown">
	    <button>Dropdown</button>
	    <ul>
	        <li><a href="helpform.html">Help Request</a></li>
	        <li><a href="feedback_form.html">Feedback Form</a></li>
	    </ul>
     </div>
     <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	 <script type="text/javascript">
	    $(document).ready(function(){
	        $('button').click(function(){
	            $('ul').toggleClass("active");
	        });
	    });
	 </script>
</body>

My CSS

.dropdown
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
button
{
    position: relative;
    width: 200px;
    height: 60px;
    font-size: 24px;
    background: #27AE60;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    cursor: pointer;
    outline: none;
}
ul
{
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    transform-origin: top;
    transform: perspective(1000px) rotateX(-90deg);
    transition: 0.5s;
}
ul.active
{
    transform: perspective(1000px) rotateX(0deg);
}
ul li
{
    list-style: none;
}
ul li a
{
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    background: #212F3D;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,.2);
    transition: 0.5s;
}
ul li a:hover
{
    background: #27AE60
}
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums