Foldable info tabs

By Ken Hawkins

interactive accordian help Requires EBI Visual Framework 1.2.0, 1.3.0

Add some contextual help.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<ul class="accordion foldable-info-tabs" data-accordion data-allow-all-closed="true" data-multi-expand="true" data-slide-speed="0">
  <li data-accordion-item>
    <a href="#" class="tag">I don’t think our service is processing personal data?</a>
    <div class="accordion-content callout clear" data-tab-content>
      Are you sure? Some examples of personal data processing that you might be doing without thinking about them: Web analytics capturing users locations? Logging of IP addresses in application logs? Email lists? Surveys of users? Helpdesk or email support?
    </div>
  </li>
  <li data-accordion-item>
    <a href="#" class="tag">What is “personal data”?</a>
    <div class="accordion-content callout clear" data-tab-content>
      <p>“Personal data” is a name, an identification number, location data, an online identifier or to one or more factors specific to the physical, physiological, genetic, mental, economic, cultural or social identity of that natural person.</p>
      <p>Example of personal data: IP address, ORCID, email address...etc.  </p>
    </div>
  </li>
  <li data-accordion-item>
    <a href="#" class="tag">What is “processing of personal data”?</a>
    <div class="accordion-content callout clear" data-tab-content>
      “Processing of personal data” means any operation, automated or not, performed with the data. Examples of data processing are collection, storage, deletion, structuring, adaptation, consultation, use or dissemination.
    </div>
  </li>
</ul>

.foldable-info-tabs > li {
  margin-bottom: .5rem;
  > a:hover {
    background: #DDD;
    color: #222;
  }
  > a:before {
    font-family: 'EBI-Common';
    content: "\003f";
    margin-right: .5rem;

  }
  &.is-active > a:before {
    content: "\0f11a";

  }
  > .accordion-content {
  }
}


.foldable-info-tabs > li {
  margin-bottom: .5rem;
}

.foldable-info-tabs > li > a:hover {
  background: #DDD;
  color: #222;
}

.foldable-info-tabs > li > a:before {
  font-family: 'EBI-Common';
  content: "\003f";
  margin-right: .5rem;
}

.foldable-info-tabs > li.is-active > a:before {
  content: "\0f11a";
}

JS