<div class="expandable">
  <div class="expandable__group">
    <h3 class="expandable__title">
      <a href="#jobs-growth-investment-and-competitiveness1" class="collapsed expandable__toggle" data-toggle="collapse" aria-expanded="false">
        Jobs, Growth, Investment and Competitiveness with an additional quite long string
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </h3>
    <div id="jobs-growth-investment-and-competitiveness1" class="expandable__content collapse">
      <p>Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game.</p>
    </div>
  </div>
  <div class="expandable__group">
    <h3 class="expandable__title">
      <a href="#energy-union1" class="expandable__toggle" data-toggle="collapse" aria-expanded="false">
        Energy Union
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </h3>
    <div id="energy-union1" class="expandable__content collapse in">
      <p>Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game.</p>
    </div>
  </div>
  <div class="expandable__group">
    <h3 class="expandable__title">
      <a href="#digital-single-market1" class="collapsed expandable__toggle" data-toggle="collapse" aria-expanded="false">
        Digital Single Market
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </h3>
    <div id="digital-single-market1" class="expandable__content collapse">
      <p>Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game.</p>
    </div>
  </div>
  <div class="expandable__group">
    <h3 class="expandable__title">
      <a href="#faqs1" class="collapsed expandable__toggle" data-toggle="collapse" aria-expanded="false">
        Read the FAQs section
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </h3>
    <div id="faqs1" class="expandable__content collapse">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</p>
    </div>
  </div>
</div>

<div class="expandable expandable--icon">
  <div class="expandable__group">
    <h3 class="expandable__title">
      <a href="#jobs-growth-investment-and-competitiveness2" class="collapsed expandable__toggle" data-toggle="collapse" aria-expanded="false">
        <span class="icon icon--yellowbg icon--growth"></span>
        Jobs, Growth, Investment and Competitiveness with an additional quite long string
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </h3>
    <div id="jobs-growth-investment-and-competitiveness2" class="expandable__content collapse">
      <p>Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game.</p>
    </div>
  </div>
  <div class="expandable__group">
    <div class="expandable__title">
      <a href="#energy-union2" class="expandable__toggle" data-toggle="collapse" aria-expanded="true">
        <span class="icon icon--yellowbg icon--energy"></span>
        Energy Union
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </div>
    <div id="energy-union2" class="expandable__content collapse in">
      <p>Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game.</p>
    </div>
  </div>
  <div class="expandable__group">
    <h3 class="expandable__title">
      <a href="#digital-single-market2" class="collapsed expandable__toggle" data-toggle="collapse" aria-expanded="false">
        <span class="icon icon--yellowbg icon--digital"></span>
        Digital Single Market
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </h3>
    <div id="digital-single-market2" class="expandable__content collapse">
      <p>Bullfights. Bull hockey. Do you like this? The bull is stabbed, prodded, beaten. The bull is wounded. The bull is tired before the matador ever steps into the ring. Now, is that victory? Of course it is. Wanna know the secret to winning? Creative sportsmanship. In other words, one has to rig the game.</p>
    </div>
  </div>
  <div class="expandable__group">
    <h3 class="expandable__title">
      <a href="#faqs2" class="collapsed expandable__toggle" data-toggle="collapse" aria-expanded="false">
        <span class="icon icon--yellowbg icon--faq"></span>
        Read the FAQs section
        <span class="expandable__arrow icon icon--up"></span>
      </a>
    </h3>
    <div id="faqs2" class="expandable__content collapse">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</p>
    </div>
  </div>
</div>

<div class="expandable expandable--link">
  <a href="#draft-delegated-regulation" class="expandable__toggle collapsed" data-toggle="collapse" aria-expanded="false">
    Draft delegated regulation
    <span class="expandable__arrow icon icon--up"></span>
  </a>
  <div id="draft-delegated-regulation" class="expandable__content collapse">
    <p>Delegated regulations enable the Commission to supplement or amend non‑essential parts of EU laws. For example, in order to define detailed measures related to a law.</p>
  </div>
</div>