UHasselt Component Library

Accordion 

<div class='accordion '>
    <details open>
        <summary>
            <div class='wrapper'>
                <h3 class="heading ">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.
                </h3>
                <span class="icon fal fa-plus-square  fa-lg icon-plus" aria-hidden="true"></span>
                <span class="icon fal fa-minus-square  fa-lg icon-minus" aria-hidden="true"></span>
            </div>
        </summary>
        <div class='card-body'>
            <div class='paragraph '>
                <p>First, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
            </div>

        </div>
    </details>
    <details open>
        <summary>
            <div class='wrapper'>
                <h3 class="heading ">
                    Title of the tab
                </h3>
                <span class="icon fal fa-plus-square  fa-lg icon-plus" aria-hidden="true"></span>
                <span class="icon fal fa-minus-square  fa-lg icon-minus" aria-hidden="true"></span>
            </div>
        </summary>
        <div class='card-body'>
            <div class='paragraph '>
                <p>First, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
            </div>

        </div>
    </details>
    <details open>
        <summary>
            <div class='wrapper'>
                <h3 class="heading ">
                    Title of the tab
                </h3>
                <span class="icon fal fa-plus-square  fa-lg icon-plus" aria-hidden="true"></span>
                <span class="icon fal fa-minus-square  fa-lg icon-minus" aria-hidden="true"></span>
            </div>
        </summary>
        <div class='card-body'>
            <div class='paragraph '>
                <p>First, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
            </div>

        </div>
    </details>
</div>
 
<div class='accordion {{modifier}}'>
    {{#each items}}
        <details open>
            <summary>
                <div class='wrapper'>
                    {{render '@heading' heading}}
                    {{render '@icon' @root.icon-plus}}
                    {{render '@icon' @root.icon-minus}}
                </div>
            </summary>
            <div class='card-body'>
                {{render '@paragraph' paragraph}}
            </div>
        </details>
    {{/each}}
</div>
 
{
  "icon-plus": {
    "style": "fal",
    "icon": "fa-plus-square",
    "modifier": "icon-plus",
    "size": "fa-lg"
  },
  "icon-minus": {
    "style": "fal",
    "icon": "fa-minus-square",
    "modifier": "icon-minus",
    "size": "fa-lg"
  },
  "items": [
    {
      "heading": {
        "tag": "h3",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
      },
      "paragraph": {
        "text": "First, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
      },
      "index": "1"
    },
    {
      "heading": {
        "tag": "h3",
        "text": "Title of the tab"
      },
      "paragraph": {
        "text": "First, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
      },
      "index": "2"
    },
    {
      "heading": {
        "tag": "h3",
        "text": "Title of the tab"
      },
      "paragraph": {
        "text": "First, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
      },
      "index": "3"
    }
  ]
}
  • Content: 
    .accordion {
    details {
        @apply border border-solid border-gray border-b-0 lg:border-0 lg:border-b overflow-auto;

        .wrapper {
            @apply cursor-pointer list-none p-4 pb-3 flex justify-between text-left w-full;
        }
        summary {
            & > * {
                @apply inline;
            }

            h3 {
                @apply text-red m-0;
            }

            .icon {
                @apply mt-1 ml-4;
            }

            .icon-plus {
                @apply inline;
            }

            .icon-minus {
                @apply hidden;
            }

            &:focus {
                outline: 0 !important;
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
            }
        }

        .card-body {
            @apply py-2;

            .paragraph {
                @apply px-4;

                a {
                    @apply text-red underline;
                }
            }
        }

        &[open] {
            summary {
                .icon-plus {
                    @apply hidden;
                }

                .icon-minus {
                    @apply inline;
                }
            }
        }
    }

    details:last-child {
        border-bottom: 1px solid #e3e3e3;
    }
}
  • URL: /components/raw/accordion/accordion.css
  • Filesystem Path: src\components\03-molecules\accordion\accordion.css
  • Size: 1.3 KB
  • Content: 
    (function () {

    'use strict';

    // Close all details after iframe is loaded
    $(window).on('load', function (e) {
        document.body
            .querySelectorAll('.accordion details')
            .forEach((e) =>
                e.hasAttribute('open')
                    ? e.removeAttribute('open')
                    : e.setAttribute('open', true)
            );
    });
})();
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: src\components\03-molecules\accordion\accordion.js
  • Size: 405 Bytes

No notes defined.