<div class="Accordion Accordion--default fr-accordion js-fr-accordion" id="accordion-1">

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-0">
        <span class="Accordion-link">Cumque officiis necessitatibus omnis aut reprehenderit soluta.</span>
    </h2>
    <div id="accordion-panel-0" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
        <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Hic ea et illo sit consequatur maiores ut tenetur. Tenetur consectetur et voluptatem recusandae. Delectus exercitationem suscipit dolore quidem. Inventore neque inventore possimus deserunt. Saepe quos aliquid ad id nam. Architecto facilis minus
            debitis et voluptatem aut.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1">
        <span class="Accordion-link">Non illo nihil eos error.</span>
    </h2>
    <div id="accordion-panel-1" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
        <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Qui excepturi vel. Natus voluptas eligendi libero debitis. Accusamus porro sit repellat quis. Et dolore dolor dolorum tempore odit corrupti deleniti ab sit. Est nam quis quia hic nulla quis sunt ea. Eum voluptatem porro asperiores.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
        <span class="Accordion-link">Est maiores similique et voluptate ut velit.</span>
    </h2>
    <div id="accordion-panel-2" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
        <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Ullam nam temporibus facere. Et incidunt dolorum fugit dolore iste consectetur. Impedit quo porro. Aliquid saepe itaque maiores cum nostrum non facere. Aut ad dolore.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
        <span class="Accordion-link">Eius eos nesciunt vel neque dolor molestias.</span>
    </h2>
    <div id="accordion-panel-3" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
        <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Rem dignissimos est sed aut. Ut minima neque aut rem asperiores sequi quibusdam. Dolorem nam nulla distinctio accusantium animi nesciunt saepe dignissimos ut. Aliquam quo consequatur laborum deleniti molestiae similique. Ratione et quae quis voluptatum
            itaque repellat ea culpa accusamus. Dolor quia officia libero deleniti praesentium.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
        <span class="Accordion-link">Recusandae ut exercitationem aut non explicabo.</span>
    </h2>
    <div id="accordion-panel-4" class="Accordion-panel fr-accordion__panel js-fr-accordion__panel">
        <p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Sint nemo et dignissimos. Eaque iusto fuga ut aut consequatur omnis. Nobis eos natus ut vitae rem occaecati. Illo dolores eos occaecati voluptatum nostrum eligendi ullam non incidunt. Ex fugiat dolore et doloremque qui dolores dolor quam. Velit
            et aut odit blanditiis veritatis non cupiditate.</p>

    </div>

</div>
  • Content:
    @import "fr-accordion/accordion.css";
    
    /** @define Accordion */
    
    :root {
      --Accordion-border-color: var(--Color-grey-30);
      --Accordion-link-arrow-up: svg-load("icons/img/SVG/collapse.svg", fill=var(--Color-50));
      --Accordion-link-arrow-down: svg-load("icons/img/SVG/expand.svg", fill=var(--Color-50));
      --Accordion-link-padding: 0.5em;
      --Accordion-link-arrow-width: 1em;
    }
    
    .Accordion-panel {
      transition: height 150ms linear, visibility 150ms;
    }
    
    .Accordion-header {
      @extend .u-block;
      @extend .u-nbfc;
    }
    
    .Accordion--default .Accordion-header {
      @extend .u-color-grey-30;
      @extend .u-border-top-xxs;
      @extend .u-text-r-xs;
      @extend .u-padding-r-bottom;
      @extend .u-padding-r-top;
    }
    
    .Accordion--default .Accordion-header:first-child {
      @extend .u-border-top-none;
    }
    
    .Accordion--default .Accordion-header:hover {
      @extend .u-background-5;
    }
    
    .Accordion-link {
      @extend .u-block;
    }
    
    .Accordion--default .Accordion-link {
      @extend .u-textClean;
      @extend .u-padding-all-s;
      @extend .u-text-r-m;
      @extend .u-color-50;
      @extend .u-textWeight-600;
    }
    
    .Accordion-link--leaf {
      @extend .u-padding-left-xl;
    }
    
    .Accordion--default .Accordion-header {
      background-image: var(--Accordion-link-arrow-down);
      background-position: left var(--Accordion-link-padding) center;
      background-repeat: no-repeat;
      background-size: var(--Accordion-link-arrow-width);
      padding-left:
        calc(
          var(--Accordion-link-arrow-width) + (2 * var(--Accordion-link-padding))
        );
    }
    
    .Accordion--default .Accordion-header[aria-expanded="true"] {
      background-image: var(--Accordion-link-arrow-up);
    }
    
  • URL: /components/raw/accordion/index.css
  • Filesystem Path: src/components/accordion/index.css
  • Size: 1.6 KB
  • Content:
    import Fraccordion from 'fr-accordion'
    
    const accordion = Fraccordion({
    	// String - Use header id on element to tie each accordion panel to its header - see panelIdPrefix
    	headerIdPrefix: 'accordion-header',
    	// String - Use panel id on element to tie each accordion header to its panel - see headerIdPrefix
    	panelIdPrefix: 'accordion-panel',
    	// Boolean - If set to false, all accordion panels will be closed on init()
    	firstPanelsOpenByDefault: false,
    	// Boolean - If set to false, each accordion instance will only allow a single panel to be open at a time
    	multiselectable: true,
    	// String - Class name that will be added to the selector when the component has been initialised
    	readyClass: 'fr-accordion--is-ready'
    })
    
    export default { accordion, Fraccordion }
    
  • URL: /components/raw/accordion/index.js
  • Filesystem Path: src/components/accordion/index.js
  • Size: 769 Bytes

There are no notes for this item.