Aeroporto di Bologna - Design System

Accordion 

<div class="c-accordion is-open js-accordion">
    <div class="c-accordion__head">
        <img class="c-accordion__img" src="../../images/svgs/pin_mappa_P1.svg" alt="P1">
        <div>
            <p class="c-accordion__title">P1</p>
            <p class="c-accordion__subtitle">Parcheggi</p>
        </div>
    </div>
    <div class="c-accordion__icons">

    </div>
    <div class="c-accordion__subitems">
    </div>
</div>
 
<div class="c-accordion {{ modifier }} js-accordion" >
  <div class="c-accordion__head">
    {{#if img}}
      <img class="c-accordion__img" src="{{ path img.src }}" alt="{{ img.alt }}">
    {{/if}}
    <div>
      <p class="c-accordion__title">{{{ title }}}</p>
      <p class="c-accordion__subtitle">{{{ subtitle }}}</p>
    </div>
  </div>
  <div class="c-accordion__icons">
    
    {{#if list}}
      {{> @icon-list list }}
    {{/if}}
    
  </div>
  <div class="c-accordion__subitems">
    {{#each subitem}}
      <div class="c-accordion__subitem" style="border-color: {{ this.border-color }}">
        <div class="">{{ this.title }}</div>
        <div class="c-accordion__subdiv">
          <div class="">{{ this.text }}</div>
          <a href="{{ this.linkurl }}" >{{ this.linktext }}</a>
        </div>
      </div>
    {{/each}}
  </div>
</div>
 
{
  "modifier": "is-open",
  "img": {
    "src": "/images/svgs/pin_mappa_P1.svg",
    "alt": "P1"
  },
  "title": "P1",
  "subtitle": "Parcheggi",
  "icons": [
    {
      "src": "/images/svgs/ic_map_car.svg",
      "alt": "",
      "text": "Coperto"
    },
    {
      "src": "/images/svgs/ic_map_pin.svg",
      "alt": "",
      "text": "Fronte Aerostazione"
    },
    {
      "src": "/images/svgs/ic_map_reseats.svg",
      "alt": "",
      "text": "Posti riservati"
    },
    {
      "src": "/images/svgs/ic_map_walk.svg",
      "alt": "",
      "text": "1 min. a piedi"
    }
  ]
}
  • Content: 
    .c-accordion {
  font-size: remify(16px);
  color: primary(night, 100);
  margin-bottom: remify(16px);
  @include shadow(small);
  background-color: #E6EAEF;
  border: remify(1px) solid transparent;
  border-radius: remify(4px);
  position: relative;

  &__head {
    display: flex;
    padding: remify(16px);
    background-color: #fff;
    position: relative;
    
    @include min-screen(bp(tablet)) {
      padding: remify(16px);
    }
    .c-accordion__img {
      width: remify(35px);
      display: inline-block;
      margin-right: remify(20px);
    }

    &:after {
      content: "";
      position: absolute;
      top: remify(24px);
      right: remify(16px);
      background-image: url(../images/svgs/arrow-down-blue.svg);
      background-repeat: no-repeat;
      background-position: top right;
      width: 24px;
      height: 24px;
    }
  }

  &.is-open &__head {
    &:after { transform: rotate(180deg);  }
  }

  &__icons {
    background-color: #fff;
    border-radius: remify(4px) remify(4px) remify(24px) remify(24px) ;

    @include min-screen(bp(tablet)) {
      padding: 0 remify(16px) remify(16px);
    }

    .c-icon-list {
      display: flex;
      flex-wrap: wrap;
      .c-icon-list__item  {
        width: 50%;
        margin-bottom: remify(6px);
      }
    }
  }

  &__subitems {
    padding: remify(16px);
    .c-accordion__subitem {
      background-color: #fff;
      @include shadow(small);
      padding: remify(16px);
      border-left: remify(4px) solid;
      border-radius: remify(4px);
      color: secondary(text,100);
      margin-bottom: remify(8px);
      font-size: remify(20px);
      .c-accordion__subdiv {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: remify(16px);
      }
    }
  }

  &__icons, 
  &__subitems  {
    display: none;
  }

  &.is-open &__icons { display: flex; }
  &.is-open &__subitems  { display: block; }

}
  • URL: /components/raw/accordion/_accordion.scss
  • Filesystem Path: src/views/02-molecules/accordion/_accordion.scss
  • Size: 1.9 KB
  • Content: 
    (function() {

  var accordion = $('.js-accordion');
  var btnCloseAlert = $('.js-btn-close-alert');

  accordion.click(function(){
    $(this).toggleClass('is-open');
    $(".js-accordion").not(this).removeClass('is-open');
  });

})(jQuery);
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: src/views/02-molecules/accordion/accordion.js
  • Size: 243 Bytes

No notes defined.