<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">Quia placeat aspernatur tempore vitae repellendus velit.</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">Pariatur qui dicta autem consectetur dicta. Reprehenderit tempora aperiam exercitationem fuga soluta quod. Est molestias est ut aliquid beatae recusandae harum. Reprehenderit beatae voluptate nemo debitis. Et dolor qui omnis.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1">
        <span class="Accordion-link">Velit voluptatem expedita molestiae veritatis consectetur tempora.</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">Culpa mollitia itaque mollitia iusto nesciunt aliquid magnam. Unde quisquam quo est labore temporibus sed quisquam consequatur. Molestias est repellat ut at aut cumque ipsam. Sint eligendi omnis laborum iure neque molestiae. Esse in ut et totam
            quo distinctio.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
        <span class="Accordion-link">Enim provident autem sint.</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">Maxime quae consequatur non. Et quam facere tempora. Deleniti excepturi expedita eum consectetur. Id reprehenderit distinctio excepturi labore eaque assumenda aut ea. Sint est hic numquam et rerum quo. Sit dignissimos voluptas exercitationem officiis
            voluptatem sapiente sequi.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
        <span class="Accordion-link">Et natus quia eos enim tempora.</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">Sit odit perspiciatis magni consequatur rerum similique enim. Itaque atque praesentium reiciendis consequuntur laboriosam blanditiis repellat rerum. Sit eos et quo. Odit nostrum doloribus quaerat fugiat. Laudantium libero quia.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
        <span class="Accordion-link">Vitae harum est quasi.</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">Non doloribus sunt. Blanditiis reiciendis quidem possimus vel labore. Rerum expedita animi. Dolorum non ipsum nihil adipisci laboriosam. Excepturi dolores eaque provident rerum ratione illo mollitia. Sequi ut accusamus tempora dolorem autem sit
            impedit ab.</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.