<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">Odit quos doloribus nemo autem excepturi dolorem explicabo.</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">Delectus dolor culpa cum. Veniam nobis impedit expedita eos eius. Autem ut optio corporis alias. Modi perferendis dolor aut iste eligendi. Delectus qui natus saepe voluptas velit aliquid qui reiciendis velit. Qui qui et consequuntur et possimus
            sed.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1">
        <span class="Accordion-link">Tempore accusamus eaque rerum est.</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">Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
        <span class="Accordion-link">Ut adipisci iure tempore ullam laborum.</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">Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
        <span class="Accordion-link">Consequuntur est et quo ullam aut omnis aut et.</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">Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
        <span class="Accordion-link">Et vitae qui ullam quis alias quibusdam quos.</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">At itaque ab. Enim quia libero. Eum accusantium et blanditiis hic. Ratione aut libero sit id quas ut sit dicta. Et quis quo debitis asperiores cumque temporibus est sunt. Autem et dicta amet placeat.</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-plus: svg-load("icons/img/SVG/plus.svg", fill=var(--Color-50));
      --Accordion-link-minus: svg-load("icons/img/SVG/minus.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--plus .Accordion-header,
    .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--plus .Accordion-header:first-child,
    .Accordion--default .Accordion-header:first-child {
      @extend .u-border-top-none;
    }
    
    .Accordion--plus .Accordion-header:hover,
    .Accordion--default .Accordion-header:hover {
      @extend .u-background-5;
    }
    
    .Accordion-link {
      @extend .u-block;
    }
    
    .Accordion--plus .Accordion-link,
    .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--plus .Accordion-header,
    .Accordion--default .Accordion-header {
      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 {
      background-image: var(--Accordion-link-arrow-down);
    }
    
    .Accordion--default .Accordion-header[aria-expanded="true"] {
      background-image: var(--Accordion-link-arrow-up);
    }
    
    .Accordion--plus .Accordion-header {
      background-image: var(--Accordion-link-plus);
    }
    
    .Accordion--plus .Accordion-header[aria-expanded="true"] {
      background-image: var(--Accordion-link-minus);
    }
    
  • URL: /components/raw/accordion/index.css
  • Filesystem Path: src/components/accordion/index.css
  • Size: 2.2 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.