I'm trying to make a button on my website slide down to show text, but currently it only shows the button with the text under it. The button does not do anything but click. I want the text at the bottom to appear once I click the button. I used .slideDown() but it is only making the button appear instead of giving it any function.
<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);
margin: 0 auto;
margin-bottom: 20px;
display: flex;
padding: 10px;
border-radius:2em;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}
nav header {
display: flex;
align-items: center;
color: rgb(255, 255, 255);
flex: 1;
}
nav ul {
list-style-image: none;
}
nav li {
display: inline-block;
padding: 0 10px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* main container area beneath menu */
main {
background: rgb(245, 238, 219);
display: flex;
}
[class=sidebar] {
margin-right: 25px;
padding: 10px;
}
[class=sidebar] img {
width: 200px;
}
[class=content] {
flex: 1;
padding: 15px;
}
[class=interests] header {
font-size: 1.25em;
}
</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>
<header>Website</header>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<main>
<div class="sidebar">
<img src="https://mail.google.com/mail/u/0/?ui=2&ik=4df09cafb2&view=fimg&th=165452a04091804b&attid=0.1.1&disp=emb&attbid=ANGjdJ9lewmMheGHuQrx4zaTH2buVPilOzWqvInJBZxDZsnva2ziG_NFaDFjBtTzmraafUlg5Km7HQSkwzmjRtgVV3FtzYRjLGvV9B2gueoBBfFmAO60Fhr9h-LAmhQ&sz=s0-l75-ft&ats=1534463719799&rm=165452a04091804b&zw&atsh=1">
</div>
<div class="content">
<header> </header>
<p> Student</p>
<section class="interests">
<header>Very Interesting Interests</header>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Writing</li>
</ul>
</section>
</main>
<main class="container2">
<div class="professional-content">
<header>About Me</header>
<section class = "interests">
<button> My professional interests</button>
<ul class = "professional interests">
<li> Political Analysis </li>
<li> Computer Science </li>
</ul>
<button> My Resume </button>
<ul class = "My Resume">
<li> <b>IBCs:</b> </li>
<li> <b>Act Scores:</b> </li>
<li> <b>Classes:</b></li>
<li> <b>Extracurriculars:</b> </li>
<li> <b>Future Goals:</b> </li>
</ul>
</section>
</div>
</main>
</div>
</body>
</html>Some corrections, plus a solution to what I think you are trying to achieve:
[class=interests] in the CSS, the dot is made for that: .interests ![id=all-contents] in the CSS, the # is made for that: #all-contents !professional interests → professional_interests,</div> in your HTML..next('ul') to target the ul right after your button.Snippet
// Modified the script
$(".professional-content button").click(function() {
$(this).next('ul').slideDown();
});body {
background: rgb(230, 230, 255);
color: rgb(0, 0, 0);
padding: 10px;
font-family: Georgia;
}
header {
font-size: 1.5em;
font-weight: bold;
}
#all-contents {
max-width: 800px;
margin: auto;
}
/* navigation menu */
nav {
background: rgb(239, 80, 41);
margin: 0 auto;
margin-bottom: 20px;
display: flex;
padding: 10px;
border-radius: 2em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
}
nav header {
display: flex;
align-items: center;
color: rgb(255, 255, 255);
flex: 1;
}
nav ul {
list-style-image: none;
}
nav li {
display: inline-block;
padding: 0 10px;
}
nav a {
text-decoration: none;
color: #fff;
}
/* main container area beneath menu */
main {
background: rgb(245, 238, 219);
display: flex;
}
.sidebar {
margin-right: 25px;
padding: 10px;
}
.sidebar img {
width: 200px;
}
.content {
flex: 1;
padding: 15px;
}
.interests header {
font-size: 1.25em;
}
/* TAKIT: Added the below */
button {
display: block; /* To avoid inline */
}
.professional-content ul {
display: none;
transition: 500ms all ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all-contents">
<nav>
<header>Ani's Amazing Website</header>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<main>
<div class="sidebar">
<img src="https://mail.google.com/mail/u/0/?ui=2&ik=4df09cafb2&view=fimg&th=165452a04091804b&attid=0.1.1&disp=emb&attbid=ANGjdJ9lewmMheGHuQrx4zaTH2buVPilOzWqvInJBZxDZsnva2ziG_NFaDFjBtTzmraafUlg5Km7HQSkwzmjRtgVV3FtzYRjLGvV9B2gueoBBfFmAO60Fhr9h-LAmhQ&sz=s0-l75-ft&ats=1534463719799&rm=165452a04091804b&zw&atsh=1">
</div>
<div class="content">
<header> Ani Gonzales </header>
<p> Northshore Student</p>
<section class="interests">
<header>Very Interesting Interests</header>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Writing</li>
</ul>
</section>
</div><!-- TAKIT: Added, it was missing -->
</main>
<main class="container2">
<div class="professional-content">
<header>About Me</header>
<section class="interests">
<button>My professional interests</button>
<ul class="professional_interests">
<li> Political Analysis </li>
<li> Computer Science </li>
</ul>
<button>My Resume</button>
<ul class="My Resume">
<li> <b>IBCs:</b> </li>
<li> <b>Act Scores:</b> </li>
<li> <b>Classes:</b></li>
<li> <b>Extracurriculars:</b> </li>
<li> <b>Future Goals:</b> </li>
</ul>
</section>
</div>
</main>
</div>