is-active class. This way you are able to customize trigger based on collapsible element state (expanded/collapsed)
Make sure the DOM element you want to be collapsible has an ID
Add is-collapsible class to the DOM element you want to be collapsible
If you want to open (expand) element by default add is-active class
Set triggers by adding data-action="collapse" and data-target="#{ELEMENT_ID}" attributes to the element(s).
Instanciate all instances through JavaScript. See JavaScript API to find out how.
<div class="card">
<header class="card-header">
<p class="card-header-title">
Card title
</p>
<a href="#collapsible-card" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div id="collapsible-card" class="is-collapsible is-active">
<div class="card-content">
<p class="title is-4">
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one
errors.”
</p>
<p class="subtitle is-5">
Jeff Atwood
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
</span>
</p>
<p class="card-footer-item">
<span>
Share on <a href="#">Facebook</a>
</span>
</p>
</footer>
</div>
</div>is-collapsible class.
<nav class="panel">
<p class="panel-heading">repositories <a href="#collapsible-panel" data-action="collapse">Collapse/Expand</a></p>
<div id="collapsible-panel" class="is-collapsible is-active"> <!-- Wrapper Div to be able to collapse/expand Panel's content -->
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-small" type="text" placeholder="search">
<span class="icon is-small is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">all</a>
<a>public</a>
<a>private</a>
<a>sources</a>
<a>forks</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
mojs
</a>
<label class="panel-block">
<input type="checkbox">
remember me
</label>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth">
reset all filters
</button>
</div>
</div>
</nav>is-collapsible class CAN NOT contains padding. That why in case you'd like to use it with message component you need to wrap the message-body content into a new container with the class message-body-content to get it work. Globally, if the collapsible element has padding you'll need to remove padding from it and wrap its content into a new div with the padding.
Hello World. Collapse/Expand
<article class="message">
<div class="message-header">
<p>Hello World. <a href="#collapsible-message" data-action="collapse">Collapse/Expand</a></p>
<button class="delete" aria-label="delete"></button>
</div>
<div id="collapsible-message" class="message-body is-collapsible">
<div class="message-body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</div>
</article>You can easily create an Accordion like component using message element with Collapsible
data-parent attribute on the collapsible element with the parent container ID as value. See below example where we wrapped all collapsible messages within a container with id accordion_first.Question 1 Collapse/Expand
Question 2 Collapse/Expand
Question 3 Collapse/Expand
<div id="accordion_first">
<article class="message">
<div class="message-header">
<p>Question 1 <a href="#collapsible-message-accordion-1" data-action="collapse">Collapse/Expand</a></p>
</div>
<div id="collapsible-message-accordion-1" class="message-body is-collapsible" data-parent="accordion_first">
<div class="message-body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</div>
</article>
<article class="message">
<div class="message-header">
<p>Question 2 <a href="#collapsible-message-accordion-2" data-action="collapse">Collapse/Expand</a></p>
</div>
<div id="collapsible-message-accordion-2" class="message-body is-collapsible" data-parent="accordion_first">
<div class="message-body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</div>
</article>
<article class="message">
<div class="message-header">
<p>Question 3 <a href="#collapsible-message-accordion-3" data-action="collapse">Collapse/Expand</a></p>
</div>
<div id="collapsible-message-accordion-3" class="message-body is-collapsible" data-parent="accordion_first">
<div class="message-body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</div>
</article>
</div>Allow multiple elements opened at the same time (means does not close previously opened element when opening the new one), set allowMultiple option to True.
See JavaScript API to find out how.
Question 1 Collapse/Expand
Question 2 Collapse/Expand
Question 3 Collapse/Expand
<div id="accordion_second">
<article class="message">
<div class="message-header">
<p>Question 1 <a href="#collapsible-message-accordion-second-1" data-action="collapse">Collapse/Expand</a></p>
</div>
<div id="collapsible-message-accordion-second-1" class="message-body is-collapsible" data-parent="accordion_second" data-allow-multiple="true">
<div class="message-body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</div>
</article>
<article class="message">
<div class="message-header">
<p>Question 2 <a href="#collapsible-message-accordion-second-2" data-action="collapse">Collapse/Expand</a></p>
</div>
<div id="collapsible-message-accordion-second-2" class="message-body is-collapsible" data-parent="accordion_second" data-allow-multiple="true">
<div class="message-body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</div>
</article>
<article class="message">
<div class="message-header">
<p>Question 3 <a href="#collapsible-message-accordion-second-3" data-action="collapse">Collapse/Expand</a></p>
</div>
<div id="collapsible-message-accordion-second-3" class="message-body is-collapsible" data-parent="accordion_second" data-allow-multiple="true">
<div class="message-body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</div>
</article>
</div>