Toggle when closed

Toggle when opened

My goal is to create a toggle arrow like shown in the pictures. The "closed" state includes a line of text with an icon next to it as well as the arrow that then triggers the toggle. The "opened" state includes a few text lines and a picture (a little different than what's shown in the screenshot, but what I struggle with is really just the animation part).

I'm using a template from HTML5 Up which included a similar toggle in the menu bar, so I tried copying the respective HTML and CSS code which didn't work. There were no error messages and the toggle did not appear on the website (see snippet below for CSS).

<span class="opener">Text that appears next to toggle arrow</span>

Is there a way to do this with HTML and CSS or is Javascript required?

 #menu ul a.opener, #menu ul span.opener {
      -moz-transition: color 0.2s ease-in-out;
      -webkit-transition: color 0.2s ease-in-out;
      -ms-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out;
      text-decoration: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      position: relative; }
      
      #menu ul a.opener:before, #menu ul span.opener:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; }
        
      #menu ul a.opener:before, #menu ul span.opener:before {
        -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
        color: #9fa3a6;
        content: '\f078';
        position: absolute;
        right: 0; }
        
      #menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
        color: #015a9d; }
        
      #menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
        display: block; }
        
      #menu ul a.opener.active:before, #menu ul span.opener.active:before {
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg); }

Toggle when closed

Toggle when opened

My goal is to create a toggle arrow like shown in the pictures. The "closed" state includes a line of text with an icon next to it as well as the arrow that then triggers the toggle. The "opened" state includes a few text lines and a picture (a little different than what's shown in the screenshot, but what I struggle with is really just the animation part).

I'm using a template from HTML5 Up which included a similar toggle in the menu bar, so I tried copying the respective HTML and CSS code which didn't work. There were no error messages and the toggle did not appear on the website (see snippet below for CSS).

<span class="opener">Text that appears next to toggle arrow</span>

Is there a way to do this with HTML and CSS or is Javascript required?

 #menu ul a.opener, #menu ul span.opener {
      -moz-transition: color 0.2s ease-in-out;
      -webkit-transition: color 0.2s ease-in-out;
      -ms-transition: color 0.2s ease-in-out;
      transition: color 0.2s ease-in-out;
      text-decoration: none;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      position: relative; }
      
      #menu ul a.opener:before, #menu ul span.opener:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; }
        
      #menu ul a.opener:before, #menu ul span.opener:before {
        -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
        color: #9fa3a6;
        content: '\f078';
        position: absolute;
        right: 0; }
        
      #menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
        color: #015a9d; }
        
      #menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
        display: block; }
        
      #menu ul a.opener.active:before, #menu ul span.opener.active:before {
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg); }

• javascript
• html
• css
• slidetoggle

2 Answers 2

You can do this easily with an html5 element called <details>

<details>
    <summary>Click here to see something</summary>
    Here's more stuff below :)
</details>

The details tag should be the preferred way of doing it. But if you want to have it more fancy or other reason you can't use the details tag you could create such a dropdown yourself.

Maybe something like this:

CSS

.dropdown {
  postion: relative;
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  width: fit-content;
  border: 1px solid transparent;
  position: absolute;
  opacity: 0;
  background: white;
  z-index: 9;
  transition: height 0.5s ease;
  transition: opacity 0.3s ease;
  height: 0;
  overflow: hidden;
}

.dropdown.active .dropdown-content {
  opacity: 1;
  height: fit-content;
  border-color: gray;
}

.dropdown-trigger > i > svg {
  width: 0.7rem;
  height: 0.7rem;
  transform: rotate(90deg);
  transition: all 0.3s ease;
}

.dropdown.active .dropdown-trigger > i > svg {
  width: 0.7rem;
  height: 0.7rem;
  transform: rotate(-90deg);
}

HTML

<div class="dropdown">
  <button class="dropdown-trigger"> <i><svg xmlns="http://www.w3/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg></i> Open</button>
  <span class="dropdown-content">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </span>
</div>

https://codepen.io/bluebrown/pen/qBZRaVX?editors=0100