Source: github.com/any86/5a.cs…

Pay attention to

According to the suggestion of @_ xiaobai_, it is better to use input with pseudo-class implementation. I have implemented it, but the small program in wechat is not working well (wechat input tag type does not support the value of checkbox or radio), so at this stage, we are in support of multi-terminal. It is also recommended that you use JS to control the “open/close” action and view the non-JS version

Making a component library is not difficult

In fact, the emergence of vUE/React and other frameworks makes it easy to make a UI by yourself. Most OF the JS logic is encapsulated by libraries, but the component code is mainly CSS, so as long as CSS is well written, a component can complete more than 60%.

Build the wheels for your professional future

Vue will soon be released in 3, all existing vUE component libraries will be rebuilt, this is another good time to build a collection of wheels star, if you want to take the opportunity to build a component library, then do it:

The final result

Conventional version

Simplified version

html

<div class="a-collapse a-collapse--simplify">
    <div class="a-collapse__item a-collapse__item--open">
        <header role="button">
            <i class="icon-arrow"></i>
            <p>The tang dynasty</p>
        </header>
        <article role="tabpanel">
            <p>Tang poetry generally refers to poems written by tang poets. Tang poetry is one of the precious cultural heritages of the Chinese nation and a pearl in the treasure house of Chinese culture. At the same time, it also has a great influence on the cultural development of many nations and countries in the world. It has important reference significance and value for future generations to study the politics, people's conditions, customs and culture of the Tang Dynasty.</p>
        </article>
    </div>

    <div class="a-collapse__item">
        <header>
            <i class="icon-arrow"></i>
            <p>Song lyrics</p>
        </header>
        <article>
            <p>A popular Chinese literary genre in the Song Dynasty, Song Ci is one of the new forms of poetry compared with the ancient ones, marking the highest achievement of Song dynasty literature. Song ci sentences have long and short, easy to sing. Because it is the lyrics of music, it is also called song ci, Yuefu, movement, Jangdan...</p>
        </article>
    </div>

    <div class="a-collapse__item">
        <header>
            <i class="icon-arrow"></i>
            <p>yuanqu</p>
        </header>
        <article>
            <p>Yuan Opera, a form of literature and art prevailing in the Yuan Dynasty, includes zaju and Sanqu, sometimes referring exclusively to zaju. Zaju, a form of performance characterized by comedy in the Song Dynasty, developed into opera in the Yuan Dynasty. Each book is mainly composed of four folds, with additional wedges at the beginning or between folds. Each fold is composed of beiqu divertimento and binbai with the same rhyme in the same palace tone. Such as Guan Hanqing's "Dou E yuan...</p>
        </article>
    </div>
</div>
Copy the code

scss

/ / spacing
$space: 4px;
// Unit rounded corner
$radius: 2px;
/ / gray
$gray-100: #f8f9fa! default;$gray-300: #dee2e6! default;.a-collapse {
    overflow: hidden;
    border-radius: $radius*2;
    border: 1px solid $gray-300;

    &__item {
        &:nth-of-type(n+2) {
            border-top: 1px solid $gray-300;
        }



        >header {
            background-color: $gray-100;
            padding: 2*$space;
            font-size: 14px;
            cursor: pointer;

            >i.icon-arrow {
                width: 1em;
                height: 1em;
                display: inline-block;
                vertical-align: middle;
                background-image: url('data:image/svg+xml; Utf8, < SVG XMLNS = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path d = "M294.1 l167 129 c 256-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-24.6 0-33.9 l127 127.1 z "/ > < / SVG > ')
            }

            >p {
                display: inline-block;
                vertical-align: middle;
                font-weight: bold; }} >article {
            display: none;
            padding: $space;
            font-size: 14px; }}// Expand the case
    &__item {
        &--open {
            >header {
                border-bottom: 1px solid $gray-300;

                >i.icon-arrow {
                    transform: rotate(90deg); }} >article {
                display: block; }}}// Simplified version
    &--simplify {
        border: none;

        .a-collapse__item{>header {
                border: none;
                background-color: transparent; }}}}Copy the code

js

This article does not want to talk about JS. If you are interested, the rest of js work will be left to you to complete. When VUe3 is released, I will combine TS to achieve a complete component.

  1. Add an “accordion” option to the component, which only opens one “page” at a time.
  2. Every time you click on the header TAB, the “page” is merged and expanded.
  3. – add an animation effect to “merge/expand”, it will require JS to calculate the height of the “page”, in order to achieve the same animation as the “merge/expand” animation of the “Collapse components in the UI”.

Hey, there isn’t much work to see if it’s JS!