Slide down button to show text HTML CSS

Some corrections, plus a solution to what I think you are trying to achieve:

Don’t use [class=interests] in the CSS, the dot is made for that: .interests !
Don’t use [id=all-contents] in the CSS, the # is made for that: #all-contents !
Don’t use spaces in class names ! professional interests → professional_interests,
There was a missing closing </div> in your HTML.
Then, in the script, you can use .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>

More Related Contents:

Leave a Comment Cancel reply