<div class="c-collapsible--simple o-collapsible">

    <p class="c-collapsible__title o-collapsible__title js-collapsible-title">
        <button type="button" data-opens-text="apri" data-closes-text="chiudi" aria-expanded="true">
            <span class="h2"> Operating performance
                <svg class="arrow-down" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"></path>
                </svg>
                <svg class="arrow-up" viewBox="0 0 24 24">
                    <path d="M7 14l5-5 5 5z"></path>
                </svg>
            </span>
        </button>
    </p>

    <div class="o-collapsible__content">
        <br>
        <p>2021 was still strongly characterized by the impact of the pandemic. However, thanks to the solid performance of
            the vaccination campaign, the effects of the Covid have been significantly mitigated, allowing Aeroporto di
            Bologna to begin to see signs of recovery, highlighted by the increase in traffic levels.</p>
        <p><strong>Consolidated revenues</strong> show an overall decrease of 13.3% from 67.5 million euro to 58.5 million
            euro, but revenues adjusted by revenues from construction services, which are related to lower investments made,
            grow by 33.6% from 37.8 million euro in 2020 to 50.4 million euro in 2021. Specifically, aeronautical services
            revenues decrease by 52.9% compared to 2019 due to the contraction in traffic, but increase by 38.4% compared to
            2020 due to the recovery starting in late spring 2021. Non-aeronautical services revenues decline by 55% from
            2019, but grow by 29.1% when compared to 2020. Construction services revenues decline (-72.6% compared to 2020 and
            -51% compared to 2019) is due to lower capital expenditures in both aviation and non-aviation segments. Finally,
            the decline of the other operating revenues and income (-36.3% compared to 2020 and -38.8% compared to 2019)
            result primarily from lower sales of energy efficiency certificates and lower airport area conduction revenues.
        </p>
        <p>Overall, 2021 <strong>operating costs</strong> decrease by 23% compared to 2020 and by 31.5% compared to 2019.
            Compared to 2020, the decrease is driven solely by construction services costs, as the other cost categories are
            all up.
            In more detail, the costs of consumables and goods show an increase of 45.4% over 2020 and a decrease of 14.3%
            over 2019, mainly due to the purchase of aircraft fuel as a result of traffic trends. Cost of services tended to
            be in line with 2020 and 25.7% lower than 2019.
            The changes in the item fees, rentals and other costs (+33.5% compared to 2020 and -47% compared to 2019) is
            mainly due to the trend in traffic volumes on the basis of which concession and security fees are calculated.
            Finally, other operating expenses are down compared to 2019 (-3.8%) mainly due to lower tax expenses but up
            (+6.6%) compared to 2020.</p>
        <p>2021 shows a <strong>Gross Operating Margin (EBITDA)</strong> that returns to a positive figure of 3.5 million
            euro, compared to -3.9 million euro in 2020 and the positive figure of 44.9 million euro in 2019, as a result of a
            revenue trend closely linked to traffic and as a consequence of greater cost rigidity, also taking into account
            the high fixed cost structure that characterizes airport operators.
            Excluding revenues and costs for construction services and revenues from Terminal Value on renewal provision, an
            adjusted EBITDA of 3.1 million euro was recorded, compared to a negative 5.6 million euro in 2020 and +44.1
            million euro in 2019.</p>
        <p>The <strong>consolidated net result</strong>, entirely attributable to the Group, stands at a loss of 6.7 million
            euro, compared with the negative result of 13.6 million euro in 2020; the halving of the net loss is significant,
            but still far from the results of the last pre-Covid year in which net income was 20.9 million euro.</p>
    </div>
</div>

<div class="c-collapsible--simple o-collapsible">
    <p class="c-collapsible__title o-collapsible__title js-collapsible-title"><button type="button" data-opens-text="apri" data-closes-text="chiudi" aria-expanded="true"><span class="h2">
                Traffic<svg class="arrow-down" viewBox="0 0 24 24">
                    <path d="M7 10l5 5 5-5z"></path>
                </svg><svg class="arrow-up" viewBox="0 0 24 24">
                    <path d="M7 14l5-5 5 5z"></path>
                </svg></span></button></p>
    <div class="o-collapsible__content">
        <br>
        <p>The traffic trend in 2021 was also strongly linked to the pandemic, reflecting the various phases of the trend of
            contagions and the vaccination campaign, the restrictive measures implemented at national and international level,
            and the spread of the Omicron variant. While the first quarter of 2021 showed no signs of improvement compared to
            2020 - with the exception of the cargo sector - starting from late spring there was a recovery in traffic.</p>
        <p>Indeed, during the second and third quarters of 2021, passengers increased by more than 1.6 million compared to
            the same period in 2020, characterized by the lockdown. In the fourth quarter, traffic volumes remained high in
            October and November, while in December, due to the additional wave of contagion resulting from the Omicron
            variant and the subsequent reinstatement of mobility restriction measures, traffic slowed down.</p>
        <p>Overall, in 2021 the airport recorded 4,103,816 passengers, down 56.4% compared to 2019 but up 63.7% compared to
            2020, with 42,477 movements (down 44.9% compared to 2019 and up 40.9% compared to 2020) and an average load factor
            increasing from 60.5% in 2020 to 68.7% in 2021, gradually improving over the year: 53.6% in the first quarter, 64%
            in the second quarter, 71.3% in the third quarter and 70.3% in the fourth quarter.</p>
        <p>Scheduled traffic was more affected by the decline in passengers in 2021 (-72.9% compared to 2019) than low-cost
            traffic (-44.5% compared to 2019) due to both a higher contraction in movements and a lower load factor.</p>
        <p>In line with the 2020 trend, domestic traffic performed substantially better than the international component:
            passengers on domestic flights have already reached about 80% of pre-pandemic levels in 2021 (-21.5% compared to
            2019) and those on international flights are still held back by uncertainties about the international health
            situation and different access rules in individual countries.</p>
        <p>In 2021, 37.4% of the airport's passenger traffic was domestic, a significantly higher incidence than in 2020 and
            2019. Spain with 14.3% is confirmed as the second country in terms of number of passengers, followed by Germany
            with 5.7%, Romania with 4.9% and France with 4.6%.</p>
        <p>In 2021, 113 destinations could be reached directly from Bologna, a slight increase on 2020. In 2021 half of the
            ten main destinations are foreign cities, the first of which is Tirana with almost 150 thousand passengers.</p>
        <p>Among the carriers, Ryanair is confirmed as the leading company at the airport with 58.8% of total traffic, due
            to a lower reduction in passengers than the average of the other carriers. In second place is confirmed Wizz Air,
            with a share that grows from 5.4% in 2019 to 11.8% in 2021, followed by Air France, KLM, Volotea, Air Nostrum and
            Turkish Airlines with shares between 2% and 3%.</p>
        <p>Cargo traffic in 2021 amounted to 50,121,148 kg, increasing by 15.5% compared to 2020, and 2.6% compared to 2019.
            After Milan Malpensa and Rome Fiumicino, Bologna airport was the third Italian airport in the cargo sector in 2021
            (it was fifth in 2019), in particular thanks to the strong development of courier traffic, supported by the strong
            growth of e-commerce.</p>
    </div>
</div>
<div class="c-collapsible--simple o-collapsible">

  <p class="c-collapsible__title o-collapsible__title js-collapsible-title">
    <button type="button" data-opens-text="apri" data-closes-text="chiudi" aria-expanded="true">
      <span class="h2"> Operating performance
        <svg class="arrow-down" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg>
        <svg class="arrow-up" viewBox="0 0 24 24">
          <path d="M7 14l5-5 5 5z"></path>
        </svg>
      </span>
    </button>
  </p>



  <div class="o-collapsible__content">
    <br>
    <p>2021 was still strongly characterized by the impact of the pandemic. However, thanks to the solid performance of
      the vaccination campaign, the effects of the Covid have been significantly mitigated, allowing Aeroporto di
      Bologna to begin to see signs of recovery, highlighted by the increase in traffic levels.</p>
    <p><strong>Consolidated revenues</strong> show an overall decrease of 13.3% from 67.5 million euro to 58.5 million
      euro, but revenues adjusted by revenues from construction services, which are related to lower investments made,
      grow by 33.6% from 37.8 million euro in 2020 to 50.4 million euro in 2021. Specifically, aeronautical services
      revenues decrease by 52.9% compared to 2019 due to the contraction in traffic, but increase by 38.4% compared to
      2020 due to the recovery starting in late spring 2021. Non-aeronautical services revenues decline by 55% from
      2019, but grow by 29.1% when compared to 2020. Construction services revenues decline (-72.6% compared to 2020 and
      -51% compared to 2019) is due to lower capital expenditures in both aviation and non-aviation segments. Finally,
      the decline of the other operating revenues and income (-36.3% compared to 2020 and -38.8% compared to 2019)
      result primarily from lower sales of energy efficiency certificates and lower airport area conduction revenues.
    </p>
    <p>Overall, 2021 <strong>operating costs</strong> decrease by 23% compared to 2020 and by 31.5% compared to 2019.
      Compared to 2020, the decrease is driven solely by construction services costs, as the other cost categories are
      all up.
      In more detail, the costs of consumables and goods show an increase of 45.4% over 2020 and a decrease of 14.3%
      over 2019, mainly due to the purchase of aircraft fuel as a result of traffic trends. Cost of services tended to
      be in line with 2020 and 25.7% lower than 2019.
      The changes in the item fees, rentals and other costs (+33.5% compared to 2020 and -47% compared to 2019) is
      mainly due to the trend in traffic volumes on the basis of which concession and security fees are calculated.
      Finally, other operating expenses are down compared to 2019 (-3.8%) mainly due to lower tax expenses but up
      (+6.6%) compared to 2020.</p>
    <p>2021 shows a <strong>Gross Operating Margin (EBITDA)</strong> that returns to a positive figure of 3.5 million
      euro, compared to -3.9 million euro in 2020 and the positive figure of 44.9 million euro in 2019, as a result of a
      revenue trend closely linked to traffic and as a consequence of greater cost rigidity, also taking into account
      the high fixed cost structure that characterizes airport operators.
      Excluding revenues and costs for construction services and revenues from Terminal Value on renewal provision, an
      adjusted EBITDA of 3.1 million euro was recorded, compared to a negative 5.6 million euro in 2020 and +44.1
      million euro in 2019.</p>
    <p>The <strong>consolidated net result</strong>, entirely attributable to the Group, stands at a loss of 6.7 million
      euro, compared with the negative result of 13.6 million euro in 2020; the halving of the net loss is significant,
      but still far from the results of the last pre-Covid year in which net income was 20.9 million euro.</p>
  </div>
</div>



<div class="c-collapsible--simple o-collapsible">
  <p class="c-collapsible__title o-collapsible__title js-collapsible-title"><button type="button" data-opens-text="apri"
      data-closes-text="chiudi" aria-expanded="true"><span class="h2">
        Traffic<svg class="arrow-down" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z"></path>
        </svg><svg class="arrow-up" viewBox="0 0 24 24">
          <path d="M7 14l5-5 5 5z"></path>
        </svg></span></button></p>
  <div class="o-collapsible__content">
    <br>
    <p>The traffic trend in 2021 was also strongly linked to the pandemic, reflecting the various phases of the trend of
      contagions and the vaccination campaign, the restrictive measures implemented at national and international level,
      and the spread of the Omicron variant. While the first quarter of 2021 showed no signs of improvement compared to
      2020 - with the exception of the cargo sector - starting from late spring there was a recovery in traffic.</p>
    <p>Indeed, during the second and third quarters of 2021, passengers increased by more than 1.6 million compared to
      the same period in 2020, characterized by the lockdown. In the fourth quarter, traffic volumes remained high in
      October and November, while in December, due to the additional wave of contagion resulting from the Omicron
      variant and the subsequent reinstatement of mobility restriction measures, traffic slowed down.</p>
    <p>Overall, in 2021 the airport recorded 4,103,816 passengers, down 56.4% compared to 2019 but up 63.7% compared to
      2020, with 42,477 movements (down 44.9% compared to 2019 and up 40.9% compared to 2020) and an average load factor
      increasing from 60.5% in 2020 to 68.7% in 2021, gradually improving over the year: 53.6% in the first quarter, 64%
      in the second quarter, 71.3% in the third quarter and 70.3% in the fourth quarter.</p>
    <p>Scheduled traffic was more affected by the decline in passengers in 2021 (-72.9% compared to 2019) than low-cost
      traffic (-44.5% compared to 2019) due to both a higher contraction in movements and a lower load factor.</p>
    <p>In line with the 2020 trend, domestic traffic performed substantially better than the international component:
      passengers on domestic flights have already reached about 80% of pre-pandemic levels in 2021 (-21.5% compared to
      2019) and those on international flights are still held back by uncertainties about the international health
      situation and different access rules in individual countries.</p>
    <p>In 2021, 37.4% of the airport's passenger traffic was domestic, a significantly higher incidence than in 2020 and
      2019. Spain with 14.3% is confirmed as the second country in terms of number of passengers, followed by Germany
      with 5.7%, Romania with 4.9% and France with 4.6%.</p>
    <p>In 2021, 113 destinations could be reached directly from Bologna, a slight increase on 2020. In 2021 half of the
      ten main destinations are foreign cities, the first of which is Tirana with almost 150 thousand passengers.</p>
    <p>Among the carriers, Ryanair is confirmed as the leading company at the airport with 58.8% of total traffic, due
      to a lower reduction in passengers than the average of the other carriers. In second place is confirmed Wizz Air,
      with a share that grows from 5.4% in 2019 to 11.8% in 2021, followed by Air France, KLM, Volotea, Air Nostrum and
      Turkish Airlines with shares between 2% and 3%.</p>
    <p>Cargo traffic in 2021 amounted to 50,121,148 kg, increasing by 15.5% compared to 2020, and 2.6% compared to 2019.
      After Milan Malpensa and Rome Fiumicino, Bologna airport was the third Italian airport in the cargo sector in 2021
      (it was fifth in 2019), in particular thanks to the strong development of courier traffic, supported by the strong
      growth of e-commerce.</p>
  </div>
</div>
{
  "name": "default",
  "title": "Element title",
  "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime recusandae eligendi beatae nesciunt sit. Officiis nulla maiores, alias minima, dolorum harum et earum molestias odio architecto tempore est consequuntur ullam.",
  "id": "molecule-collapsible--default"
}
  • Content:
    /*------------------------------------*\
      Simple
    \*------------------------------------*/
    
    .c-collapsible--simple {
      background-color: secondary(soft, 100);
      border-radius: remify(16px);
      margin-bottom: remify(24px);
      border: remify(1px) solid primary(night, 10);
    
      .c-collapsible__title {
        color: primary(night, 100);
        @include font-scale(level-2, regular);
        cursor: pointer;
    
        button {
          display: flex;
          padding: remify(12px) remify(24px);
        }
    
        button span.h2 {
          display: flex;
          justify-content: space-between;
          width: 100%;
          align-items: center;
          color: currentColor;
        }
    
      }
    
      h3 {
        .c-canvas__paper & {
          font-size: 115%;
          font-weight: fw(semibold);
        }
      }
    
      h4 {
        @include font-scale(level-3, semibold);
      }
    
    }
    
    .c-collapsible--simple:hover,
    .c-collapsible--simple:has([aria-expanded="true"]) {
    
      .c-collapsible__title {
        color: primary(sky, 100);
      }
    
    }
    
    /*------------------------------------*\
      Button
    \*------------------------------------*/
    
    .c-collapsible--btn {
    
      border-bottom: none;
    
      .c-form__alone--createpsw & {
        flex-grow: 1;
      }
    
      .c-collapsible__title {
    
        // Hack for Safari (web and mobile)
        // See also in: 'src/views/01-atoms/ctas/atom-button/_button.scss'
        // @supports (-webkit-appearance:none) {
        //   color: #fff;
        // }
    
        .c-form--sticker & {
          margin-bottom: 0;
        }
    
      }
    
      [aria-expanded="false"],
      [aria-expanded="true"] {
        &:after {
          content: "\25be";
          display: inline-block;
          margin-left: remify(4px);
          // transition: transform .3s ease;
        }
      }
    
      [aria-expanded="true"] {
        margin-bottom: remify(24px);
        &:after {
          transform: rotate(-180deg);
        }
      }
    
      .c-collapsible__title button {
        color: primary(sky, 120);
        text-align: right;
        display: block;
        width: auto;
        @extend .c-button;
        @extend .c-button--ghost;
        padding-left: remify(16px);
        padding-right: remify(16px);
    
        svg.arrow-up,
        svg.arrow-down {
          @extend .u-visuallyhidden;
        }
    
        .c-form__alone--createpsw & {
          margin-top: 0;
          margin-right: remify(24px);
        }
    
      }
    
    }
    
    /*------------------------------------*\
      Password
    \*------------------------------------*/
    
    .c-collapsible--psw {
      
      [aria-expanded="false"],
      [aria-expanded="true"] {
        &:after {
          content: "\25be";
          display: inline-block;
          transition: transform .3s ease;
        }
      }
    
      [aria-expanded="true"] {
        margin-bottom: remify(24px);
        &:after {
          transform: rotate(-180deg);
        }
      }
    
    }
    
    /*------------------------------------*\
      Invoice
    \*------------------------------------*/
    
    .c-collapsible--invoice {
      
      .alert-msg {
        font-size: 75%;
        line-height: 1.5;
        text-align: center;
        position: relative;
        top: remify(40px);
    
        @include min-screen (bp(tablet)) {
          width: 70%;
          margin: 0 auto;
        }
    
      }
    
    }
    
    /*------------------------------------*\
      Baloon
    \*------------------------------------*/
    
    .c-collapsible__content--baloon {
      @include shadow(medium);
      padding: remify(16px);
      border-radius: remify(4px);
      position: relative;
      background-color: #F4F6F7;
    
      &:before{
        content: "";
        position: absolute;
        @include css-triangle("up", 10px, #F4F6F7);
        top: remify(-20px);
        left: 50%;
        transform: translateX(-50%);
        @include shadow(medium);
      }
    
      @include min-screen (bp(tablet)) {
        padding: remify(24px);
      }
    
    }
    
    /*------------------------------------*\
      Faq
    \*------------------------------------*/
    
    .c-collapsible--faq {
    
      // .c-collapsible__title button {
      //   border-radius: remify(8px);
    
      //   @include min-screen (bp(tablet)) {
      //     padding: remify(20px) remify(16px);
      //   }
    
      // }
    
      // .c-collapsible__title {
      //   font-size: 100%;
    
      //   @include min-screen (bp(tablet)) {
      //     font-size: 125%;
      //   }
      // }
    
    }
    
    /*------------------------------------*\
      Privacy
    \*------------------------------------*/
    
    .c-collapsible--privacy {
      margin: remify(16px) 0;
    
      // .c-collapsible__title {
    
      //   button {
      //     padding: remify(8px) remify(8px);
      //   }
    
      // }
    
    }
    
    
    /*------------------------------------*\
      Docs
    \*------------------------------------*/
    
    .c-collapsible__content { 
      .c-media {
        margin-bottom: remify(16px);
      }
    }
  • URL: /components/raw/collapsible/_collapsible.scss
  • Filesystem Path: src/views/02-molecules/collapsible/_collapsible.scss
  • Size: 4.3 KB
  • Content:
    // ES5
    
    'use strict';
    
    (function () {
      // Get all the <h4> headings
      var headings = document.querySelectorAll('.js-collapsible-title');
    
      function isHTML(str) {
      var a = document.createElement('div');
      a.innerHTML = str;
    
      for (var c = a.childNodes, i = c.length; i--; ) {
        if (c[i].nodeType == 1) return true; 
      }
    
      return false;
    }
    
    
      Array.prototype.forEach.call(headings, function (heading) {
        // Give each <h4> a toggle button child
        // with the SVG plus/minus icon
        
        // heading.innerHTML = '<button class="c-collapsible__button" type="button" data-opens-text="apri" data-closes-text="chiudi" aria-expanded="false">' + heading.innerHTML + '<svg class="arrow-down" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg><svg class="arrow-up" viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" ></path></svg></button>';
    
        var headingcontent = heading.innerHTML;
    
        if ((isHTML(headingcontent)) && ($(headingcontent).is('button'))) {
          //console.log("continene html button");
          // Checks if the string  contains HTML and if it has already been converted to a button
          // (ie. in Endurance CMS pages)
          // and prevent double code injection
        } else {
          // console.log("no html button");
          // injects toggle button 
          heading.innerHTML = '<button class="c-collapsible__button" type="button" data-opens-text="apri" data-closes-text="chiudi" aria-expanded="false">' + headingcontent + '<svg class="arrow-down" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg><svg class="arrow-up" viewBox="0 0 24 24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" ></path></svg></button>';
        };
    
    
        // Function to create a node list 
        // of the content between this <h4> and the next
        var getContent = function getContent(elem) {
          var elems = [];
          while (elem.nextElementSibling && elem.nextElementSibling.tagName !== 'p.js-collapsible-title') {
            elems.push(elem.nextElementSibling);
            elem = elem.nextElementSibling;
          }
    
          // Delete the old versions of the content nodes
          elems.forEach(function (node) {
            node.parentNode.removeChild(node);
          });
    
          return elems;
        };
    
        // Assign the contents to be expanded/collapsed (array)
        var contents = getContent(heading);
    
        // Create a wrapper element for `contents` and hide it
        var wrapper = document.createElement('div');
        wrapper.classList.add("o-collapsible__content");
        wrapper.hidden = true;
    
        // Add each element of `contents` to `wrapper`
        contents.forEach(function (node) {
          wrapper.appendChild(node);
        });
    
        // Add the wrapped content back into the DOM 
        // after the heading
        heading.parentNode.insertBefore(wrapper, heading.nextElementSibling);
    
        // Assign the button
        var btn = heading.querySelector('button');
    
        btn.onclick = function () {
          // Cast the state as a boolean
          var expanded = btn.getAttribute('aria-expanded') === 'true' || false;
    
          // Switch the state
          btn.setAttribute('aria-expanded', !expanded);
          // Switch the content's visibility
          wrapper.hidden = expanded;
    
        };
    
      });
    
      // gestione apertura collapsible in caso di match tra url e id
      // wrapper dell'collapsible 
      var collapsibleElem = $('.o-collapsible');
    
      // iterazione dei vari collapsible in pagina
      $(collapsibleElem).each(function (index) {
    
        collapsibleBtn = $(this).find('.c-collapsible__button');
        collapsibleTitle = $(this).find('.js-collapsible-title'),
          titleId = $(collapsibleTitle).attr('id'),
          indexString = $(location).attr('href'),
          content = $(this).find('.o-collapsible__content');
    
    
        if (Array.prototype.includes) {
          // se l'url contiene l'id del collapsible ed ha una lunghezza maggiore di 0 
          if (indexString.includes(titleId) && titleId.length > 0) {
    
            // imposta come true l'attributo aria-expanded
            $(collapsibleBtn).attr('aria-expanded', true);
    
            // rimuovi l'attributo hidden dal contenuto espandibile
            $(content).removeAttr('hidden');
    
            // scrolla la pagina fino al collapsible
            $('html, body').animate({
              scrollTop: $(this).offset().top - 100
            }, 2000);
          }
        }
    
      })
    
    })();
    
  • URL: /components/raw/collapsible/collapsible.js
  • Filesystem Path: src/views/02-molecules/collapsible/collapsible.js
  • Size: 4.3 KB
  • Handle: @collapsible--v2018
  • Preview:
  • Filesystem Path: src/views/02-molecules/collapsible/collapsible--v2018.hbs

To tangible frontend team:

You can copy and paste the code of this component wherever you want instead importing.