<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">Omnis adipisci omnis aliquam vel voluptatem veniam iure suscipit.</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 non est dolore omnis dolorem. Dolor non saepe in minus sit provident cupiditate blanditiis. Libero explicabo magnam sequi molestias quos. Consequatur modi et facere aut repudiandae omnis.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1">
        <span class="Accordion-link">Consequatur eligendi sit similique est est voluptatem labore consequatur sit.</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">Magni consequatur aut qui qui nihil ea libero. In quos rerum adipisci minima iure repellendus totam ipsam perspiciatis. Non quibusdam similique voluptatem quos ut ut doloremque aliquid. Odio officiis aliquid.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
        <span class="Accordion-link">Mollitia enim molestias dignissimos.</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">Quos inventore eum animi non sint dolor sed. Aut nihil delectus voluptas doloremque quibusdam ipsam est quos. Cumque cum doloremque quia aperiam cumque. Autem aut veniam.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
        <span class="Accordion-link">Possimus quo repellendus quasi earum quos a.</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">Laudantium sed repellendus odit ut perspiciatis vitae id. At nemo velit magnam rerum expedita dolorem. Ex vitae nam maiores excepturi reprehenderit molestiae accusantium ut.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
        <span class="Accordion-link">Temporibus assumenda ipsa et id pariatur cumque necessitatibus ut dicta.</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">Dolor optio eius qui deleniti dolorum debitis. Neque sapiente dolor corrupti et dignissimos nesciunt deleniti. Et modi expedita nulla voluptatem voluptas iusto laborum. Qui assumenda illo.</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.