Accordion

In this page you can see how accordion is used in Masterflex.

Version 3.0.0

<div class="accordion-container">
  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

Version 2.8.0

<div class="accordion-container">
	<div class="ac">
		<h5 class="ac-q" tabindex="0">Lorem ipsum Ελληνικό</h5>
		<div class="ac-a">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
		</div>
	</div>
	<div class="ac">
		<h5 class="ac-q" tabindex="0">Lorem ipsum</h5>
		<div class="ac-a">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
		</div>
	</div>
	<div class="ac">
		<h5 class="ac-q" tabindex="0">Lorem ipsum</h5>
		<div class="ac-a">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
		</div>
	</div>
</div>
Lorem ipsum Ελληνικό

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.

Leave a Comment