<div class="spacer"></div><span class="disclosure-label" hidden>Show details</span>
<div class="details">
<p>Platform cooperatives are an alternative to venture capital-funded and centralized platforms, putting stakeholders before shareholders.</p>
</div>
{% if not standAlone %}<div class="spacer"></div>{% endif %}
<span class="disclosure-label" hidden>{{ label }}</span>
<div class="details">
<p>{{ content }}</p>
</div>
{
"label": "Show details",
"content": "Platform cooperatives are an alternative to venture capital-funded and centralized platforms, putting stakeholders before shareholders."
}
A disclosure button can be used to toggle the visibility of the content that follows it in the DOM.
To implement the disclosure button component, use the following markup:
<span class="disclosure-label" hidden><!-- Label for content --></span>
<div class="details">
<!-- Content -->
</div>The .details class is optional; any single element that follows the <span> will be shown/hidden by the button.
Then, add the following JavaScript to the page:
var disclosureLabel = document.querySelector( '.disclosure-label' );
new Pinecone.DisclosureButton( label );