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); }
Share
Improve this question
edited Aug 23, 2020 at 14:39
possum
2,9257 gold badges18 silver badges24 bronze badges
asked Aug 23, 2020 at 10:00
ottubaottuba
191 silver badge3 bronze badges
2 Answers
Reset to default 7You 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