Slide down button to show text HTML CSS

Question

Slide down button to show text HTML CSS

1.1k Views Asked by ASG At 17 August 2018 at 12:45

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>

Original Q&A

There are 2 best solutions below

Matt.S On 17 August 2018 at 13:15

i think this would be much easier if you had the text you want to show when clicking the button hidden

   <div style="display: none;">My Text</div>

and then make it visible when clicking the button with this function:

 function showText() {
 getElementById("textId").style.display="block";

then just add the function to your button:

<button onclick="showText()">My Button</button>

i hope this helps.

**Takit Isy** · Accepted Answer · 2018-08-17T13:25:53.423000

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>

Slide down button to show text HTML CSS

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in SLIDEDOWN

Trending Questions

Popular # Hahtags

Popular Questions