<div class="prose">
<div class="accordion">
<section class="prose__section">
<button class="accordion__trigger button button--small button--yellow">More Information</button>
<p>For convenience we provide a <a href="#">360Giving Spreadsheet Template</a> that can be used directly, or adapted to your needs.</p>
<p>The template is a multi-sheet spreadsheet, and each sheet is described below.</p>
<p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
</section>
<section class="prose__section accordion__extra" aria-hidden>
<h5>This is a heading 5</h5>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
<h6>This is a heading 6</h6>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
</section>
</div>
</div>
<div class="prose">
<div class="accordion">
<section class="prose__section">
<button class="accordion__trigger button button--small button--yellow">More Information</button>
<p>For convenience we provide a <a href="#">360Giving Spreadsheet Template</a> that can be used directly, or adapted to your needs.</p>
<p>The template is a multi-sheet spreadsheet, and each sheet is described below.</p>
<p>Many data producers will be able to fit all the information about a single grant on one row of a spreadsheet. In fact most data producers do exactly that, and provide a single sheet with many individual grants.</p>
</section>
<section class="prose__section accordion__extra" aria-hidden>
<h5>This is a heading 5</h5>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
<h6>This is a heading 6</h6>
<p>Data in JSON format is ideal for direct use by developers building visualisations and web apps. The JSON should conform to the 360Giving JSON Schemas. Anyone automating the publication of their data from their internal databases or via an API may favour this format. The column titles used in spreadsheet representations of data are derived directly from the 360Giving JSON Schemas.</p>
</section>
</div>
</div>
/* No context defined. */
document.querySelectorAll('.accordion__trigger').forEach(function(el) {
el.onclick = function(){
const wrapper_element = el.closest('.accordion');
const target_element = wrapper_element.querySelector('.accordion__extra');
wrapper_element.classList.toggle('accordion--expanded');
if (target_element.hasAttribute('aria-hidden')) {
target_element.removeAttribute('aria-hidden')
} else {
target_element.setAttribute('aria-hidden', '')
}
};
});
.accordion {
&__trigger {
cursor: pointer;
}
&__extra {
max-height: 0;
overflow: hidden;
transition: all .5s ease;
}
}
.accordion--expanded .accordion__extra {
height: auto;
max-height: 4000px;
}
This is a minimalist accordion component, with some accessibility best practices applied.
To work, the .accordian__trigger element needs to be placed inside the .accordian wrapper.
.accordion
# This is wrapper element, and it receives the class toggle
.accordion__trigger
# This is the trigger for opening and closing of this accordion
# It should be placed outside os .accordion__extra tag
.accordion__extra + [aria-hidden]
# This is the element that gets toggled (hides and shows).
# We use max-height and overflow-hidden to make the transitions possible without further use of Javascript.