I'm having an issue with my website where I want a button to slide down and reveal text, but currently it's only showing the button with the text already displayed below it. The button isn't functioning as intended when clicked. My goal is for the text to only appear at the bottom once the button is clicked. I tried using .slideDown() but it seems to only make the button visible without any functionality.
<html>
<head>
<style>
body {
background: rgb(230, 230, 255);
color: rgb(0, 0, 0);
padding: 10px;
font-family: Georgia;
}
header {
font-size: 1.5em;
font-weight: bold;
}
[id=all-contents] {
max-width: 800px;
margin: auto;
}
/* navigation menu */
nav
{
background: rgb(239, 80, 41);
...
</style>
<title>Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul.professional interests").slideDown();
});
});
</script>
</head>
<body>
<div id="all-contents">
<nav>
...
</section>
</div>
</main>
</div>
</body>
</html>