<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">Esse sequi adipisci quis laborum vel vel totam laborum rerum.</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">Rerum nemo ipsa voluptate. Sed ut et repellendus et et et ut similique. Et dolorem corrupti dolore quis qui voluptatem.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1">
        <span class="Accordion-link">Sit et cum iure illum ducimus dignissimos fuga iste.</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">Facilis et amet rerum omnis facere. Ex illum nobis corrupti consectetur blanditiis voluptate. Quos nam illo dignissimos dolor ipsam quisquam.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
        <span class="Accordion-link">Accusamus incidunt veritatis corporis unde facere et.</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">Labore quia occaecati nesciunt quis quis et. Aspernatur nisi qui aliquam provident fugit ut cumque. Recusandae eos ab ex similique aut. Et saepe voluptatem non architecto earum ex possimus magnam.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
        <span class="Accordion-link">Veniam cum neque sed ipsum natus ea velit doloremque.</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">Est tenetur eligendi inventore quidem velit ut unde et provident. Vero ut iste deserunt est repellat. Ea quaerat voluptatum nesciunt hic. Quisquam illum praesentium ut et. Quo consequatur ut eum voluptas et consectetur est. Aut est rem blanditiis
            enim.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
        <span class="Accordion-link">Dolorum facere corporis.</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">Cumque placeat fuga beatae ut tenetur reiciendis. Vitae doloribus accusamus. Sit sed et officiis corrupti veniam ut quasi. Qui laborum autem excepturi distinctio iusto fugiat. Ducimus hic autem. Inventore consequatur quia itaque vitae.</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.3 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: 785 Bytes

There are no notes for this item.