<div class="Accordion 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 u-text-r-s">Eaque porro quisquam.</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">Atque libero perspiciatis hic. Aliquid ab minima libero excepturi minima qui. Ratione labore molestias veritatis aut voluptatibus nihil voluptatibus porro et. Eos et temporibus doloremque omnis expedita aut hic enim. Vero ut voluptatem exercitationem
            odit voluptas ut aut.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-1">
        <span class="Accordion-link u-text-r-s">Fugiat aut eaque molestias.</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">Quasi tempora occaecati eum dolorem modi enim maiores et. Autem et magnam eos non qui ut dignissimos. Sit consequatur dolores voluptas nobis omnis consequatur. Quaerat explicabo autem quod dolores. Ab dolorem praesentium. Quo minus doloribus ipsam
            officiis quia.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-2">
        <span class="Accordion-link u-text-r-s">Ullam doloribus rerum.</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">Voluptatem dolore dolores quo. Exercitationem quos sint repellat qui repellendus beatae expedita nobis illo. Enim unde non voluptatem voluptate ipsum consequuntur aspernatur. Eos aliquid et eum cum nihil. Voluptatum qui est dignissimos vel sed
            et. Doloribus in quis at sapiente omnis et earum delectus excepturi.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-3">
        <span class="Accordion-link u-text-r-s">Porro fugit voluptas.</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">Voluptate quibusdam voluptas. Cupiditate et at. Pariatur magnam similique eaque iste deleniti asperiores eum. Voluptatum odit veritatis. Beatae molestiae optio.</p>

    </div>

    <h2 class="Accordion-header js-fr-accordion__header fr-accordion__header" id="accordion-header-4">
        <span class="Accordion-link u-text-r-s">Et tenetur modi molestiae.</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">Nihil culpa sint repudiandae aliquam reiciendis. Possimus saepe autem. Perferendis facere voluptatem ratione alias sint. Id aliquid sint doloremque. Aperiam quia alias consequatur animi quaerat et aut maxime iste. Ut perspiciatis necessitatibus
            quam iste ut.</p>

    </div>

</div>
  • Content:
    /** @define Accordion */
    
    :root {
      --Accordion-border-color: #d8d8d8;
      --Accordion-link-arrow-up: inline("icons/ita/img/SVG/collapse.svg");
      --Accordion-link-arrow-down: inline("icons/ita/img/SVG/expand.svg");
      --Accordion-link-padding: 0.5em;
      --Accordion-link-arrow-width: 0.8em;
    }
    
    .Accordion {
      @extend .u-color-grey-30;
      @extend .u-border-top-xxs;
      @extend .u-border-bottom-xxs;
    }
    
    .Accordion-panel {
      transition: height 250ms ease-out, visibility 250ms;
    }
    
    .Accordion-header {
      @extend .u-color-grey-30;
      @extend .u-border-top-xxs;
      @extend .u-block;
      @extend .u-text-r-m;
      @extend .u-textWeight-400;
      @extend .u-nbfc;
    }
    
    .Accordion-header:hover {
      @extend .u-background-5;
    }
    
    .Accordion-link {
      @extend .u-block;
      @extend .u-textClean;
      @extend .u-padding-all-s;
    }
    
    .Accordion-link {
      @extend .u-color-50;
    }
    
    .Accordion-link--leaf {
      @extend .u-padding-left-xl;
    }
    
    .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-header[aria-expanded="true"] {
      background-image: var(--Accordion-link-arrow-up);
    }
    
  • URL: /components/raw/accordion/index.css
  • Filesystem Path: src/modules/accordion/index.css
  • Size: 1.3 KB
  • Content:
    import Fraccordion from 'fr-accordion'
    
    /* eslint-disable no-unused-vars */
    
    import stylesheet from 'fr-accordion/accordion.css'
    
    /* eslint-enable */
    
    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/modules/accordion/index.js
  • Size: 880 Bytes

There are no notes for this item.