{{ description }}
Accordion menus are used to hide content inside them. Using accordion makes pages more clear when all content is not visible at the same time.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<div class="accordion">
<div class="accordion__item" x-bind:class="{ open }" x-data="{ open: false }">
<button class="accordion__title" @click="open = !open">
<i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
<use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i>
<h3 class="mb-0">Plywood</h3>
</button>
<div class="accordion__content" x-show="open" style="display: none;">
<a href="#" class="accordion__title-link"><h3 class="mb-0">Log handling</h3><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
<use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
<div class="accordion__item" x-data="{ open: false }">
<button class="accordion__title" @click="open = !open">
<i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
<use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i>
<h3 class="mb-0">Laminated veneer lumber</h3>
</button>
<div class="accordion__content" x-show="open" style="display: none;">
<a href="#" class="accordion__title-link"><h3 class="mb-0">Lumber</h3><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
<use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<a href="#" class="accordion__title-link"><h3 class="mb-0">Lumber</h3><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
<use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<a href="#" class="accordion__title-link"><h3 class="mb-0">Lumber</h3><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
<use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<a href="#" class="accordion__title-link"><h3 class="mb-0">Lumber</h3><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
<use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
</div>
We use cookies to track your visit on our website. Here you can select the level of tracking. Please note, that some of the cookies are necessary for website to function properly. See our Cookie Notice here.