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
<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";
}