Web Toolkit

image/svg+xml GitHub

Accordion 

<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">Tempore voluptatem ut aut.</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">Ex omnis rerum saepe quibusdam facilis rerum. Officiis perspiciatis est rerum harum consequatur et debitis molestiae illum. Aut omnis tenetur sed repellendus autem eos. Qui sed vitae aut explicabo et ad sit. Qui consequatur sunt. Iusto ad officiis
            sunt.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1">
        <span class="Accordion-link">A architecto qui et veritatis.</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">Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum
            consequatur et perferendis.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
        <span class="Accordion-link">Sequi quo rerum velit saepe.</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">Mollitia laborum voluptas consequatur aliquid aut voluptatem. Sit nisi veritatis eius velit expedita deserunt. Distinctio iste quo eligendi error sint officiis. Ullam aut sit voluptatem. Quis est quaerat provident modi quo ut aspernatur.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
        <span class="Accordion-link">Rerum est laborum quis distinctio.</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">Minus maxime qui saepe. Quis qui molestiae. Nisi mollitia quod qui mollitia perferendis asperiores dolorem sed dolorum. Quisquam laborum suscipit aut aut dicta nihil et illum. Quia voluptatem rem explicabo asperiores ea. Cupiditate reiciendis
            nulla minima id expedita quia.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
        <span class="Accordion-link">Praesentium beatae totam iste atque sit quae.</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">Quo assumenda magni repellat nostrum voluptatem quaerat dicta dolorum et. Iste hic natus et est. Et nam odio sapiente. Quod sit nihil unde eum doloremque.</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.