最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I create a Toggle arrow that "opens up" a section to show text as you click on the arrow?

programmeradmin1浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 7

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

发布评论

评论列表(0)

  1. 暂无评论