text 引导顺畅的手风琴+ -

Posted 2021-05-02

HTML----------------------------------------

#accordion.panel-group(role='tablist' aria-multiselectable='true')
      .panel.panel-default
        #headingOne.panel-heading(role='tab')
          h4.panel-title
            a(role='button' data-toggle='collapse' data-parent='#accordion' href='#collapseOne' aria-expanded='true' aria-controls='collapseOne')
              | Docura | Waak - vielfältig und leistungsstark
        #collapseOne.panel-collapse.collapse(role='tabpanel' aria-labelledby='headingOne')
          .panel-body
            | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      .panel.panel-default
        #headingTwo.panel-heading(role='tab')
          h4.panel-title
            a.collapsed(role='button' data-toggle='collapse' data-parent='#accordion' href='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo')
              | Das besondere an der Docura | Waak
        #collapseTwo.panel-collapse.collapse(role='tabpanel' aria-labelledby='headingTwo')
          .panel-body
            | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      .panel.panel-default
        #headingThree.panel-heading(role='tab')
          h4.panel-title
            a.collapsed(role='button' data-toggle='collapse' data-parent='#accordion' href='#collapseThree' aria-expanded='false' aria-controls='collapseThree')
              | Das vielfältige angebot der Docura | Waak
        #collapseThree.panel-collapse.collapse(role='tabpanel' aria-labelledby='headingThree')
          .panel-body
            | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            
            
SASS----------------------------------------            
            
            
#accordion
    padding-left: 180px
    padding-right: 220px
    margin-bottom: 160px
    color: $main-text
    h4
      +accordeon-headers()
      color: $black-headers
      position: relative
      &:after
        position: absolute
        content: url(../img/icons/plus.svg)
        right: 0
        top: 0
        opacity: 1
        transition: $t
      &:before
        position: absolute
        content: url(../img/icons/minus.svg)
        right: 0
        top: -7px
        opacity: 0
        transition: $t
    .open
      &:after
        opacity: 0
      &:before
        opacity: 1
    a
      display: block
      outline: none
      text-decoration: none
    .panel-default
      border: none
      box-shadow: none
      border-bottom: 1px solid $grey-lines
      &> .panel-heading
        background-color: #ffffff
        padding: 25px 0
      .panel-collapse
        .panel-body
          border: none
          padding: 0 100px 25px 0


JS----------------------------------------

jQuery(document).ready(function ($) {
  //open some slide
  $('#accordion, #accordion2, #accordion3').on('show.bs.collapse', function (event) {
    $(event.target).parent().find('h4').removeClass('open');
    $(event.target).parent().find('h4').addClass('open');
  });
  //close some slide
  $('#accordion, #accordion2, #accordion3').on('hide.bs.collapse', function (event) {
    $(event.target).parent().find('h4').removeClass('open');
  });
});

SVG----------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="18px" viewBox="0 0 17 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>75C35BC1-7B15-4C69-A045-532D51D1528D</title>
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="All_produkt-(DOCURA)-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="DOCURA_Main_Desktop" transform="translate(-1121.000000, -1801.000000)" stroke="#AAAAAA" stroke-width="2">
            <g id="Content" transform="translate(0.000000, -3.000000)">
                <g id="Block3" transform="translate(188.000000, 1706.000000)">
                    <g id="p_1" transform="translate(69.000000, 91.000000)">
                        <g id="title">
                            <g id="Plus" transform="translate(865.000000, 8.000000)">
                                <path d="M0,8 L15,8" id="minus"></path>
                                <path d="M7.5,15.5 L7.5,0.5" id="minus"></path>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="2px" viewBox="0 0 17 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>5BD9848E-BDAE-4DA2-BF84-461FB3D662FC</title>
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="WAAK_Guides" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <g id="WAAK_guides" transform="translate(-2784.000000, -2477.000000)" stroke-width="2" stroke="#AAAAAA">
            <g id="Group" transform="translate(1920.000000, 2464.000000)">
                <g id="p_1">
                    <g id="title">
                        <path d="M865,14 L880,14" id="minus"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>