Accordion: Checkbox

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-accordion">

    <label>
        <input type="checkbox" class="u-none" checked>
        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
            <div class="u-flex-one">
                Label 0
            </div>

            <svg class="o-icon o-icon--md" data-dd-icon>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
            </svg>

        </div>
        <div class="c-accordion__body">
            <figure class="o-skeleton o-skeleton-media--square-wide u-relative">
                <picture class="u-block u-size-full u-absolute u-left u-top">
                    <source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
                    <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="">
                </picture>
            </figure>

            <p class="label-03">FORMATO PUBBLICITARIO SUGGERITO: <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
            <p class="body-03 u-mb-large">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
                I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>

            <p class="label-03">FORMATO PUBBLICITARIO SUGGERITO: <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
            <p class="body-03">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
                I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>
        </div>
    </label>

    <label>
        <input type="checkbox" class="u-none">
        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
            <div class="u-flex-one">
                Label 1
            </div>

            <svg class="o-icon o-icon--md" data-dd-icon>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
            </svg>

        </div>
        <div class="c-accordion__body">
            <figure class="o-skeleton o-skeleton-media--square-wide u-relative">
                <picture class="u-block u-size-full u-absolute u-left u-top">
                    <source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
                    <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="">
                </picture>
            </figure>

            <p class="label-03">FORMATO PUBBLICITARIO SUGGERITO: <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
            <p class="body-03 u-mb-large">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
                I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>

            <p class="label-03">FORMATO PUBBLICITARIO SUGGERITO: <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
            <p class="body-03">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
                I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>
        </div>
    </label>

    <label>
        <input type="checkbox" class="u-none">
        <div class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
            <div class="u-flex-one">
                Label 2
            </div>

            <svg class="o-icon o-icon--md" data-dd-icon>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
            </svg>

        </div>
        <div class="c-accordion__body">
            <figure class="o-skeleton o-skeleton-media--square-wide u-relative">
                <picture class="u-block u-size-full u-absolute u-left u-top">
                    <source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
                    <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="">
                </picture>
            </figure>

            <p class="label-03">FORMATO PUBBLICITARIO SUGGERITO: <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
            <p class="body-03 u-mb-large">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
                I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>

            <p class="label-03">FORMATO PUBBLICITARIO SUGGERITO: <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
            <p class="body-03">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
                I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>
        </div>
    </label>

</div>


        <div class="c-accordion">
	{% for i in range(0,3) %}	
	<label>
		<input type="{{ type }}" class="u-none" {% if i ==0 %}checked{% endif %} {% if type == 'radio' %} name="c-accordion__choice"{% endif %}>
		<div class="u-size-full u-cursor-pointer  c-accordion__label u-label-04 u-p-base u-flex  u-justify-between">
			<div class="u-flex-one">
				Label {{ i }}
			</div>
			{% if icon %}
			<svg class="o-icon o-icon--md" data-dd-icon>
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ icon }}"></use>
			</svg>
		{% endif %}
		</div>
		<div class="c-accordion__body">
			<figure class="o-skeleton o-skeleton-media--square-wide u-relative">
				<picture class="u-block u-size-full u-absolute u-left u-top">
					<source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
					<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="">
				</picture>
      </figure>

			<p class="label-03">FORMATO PUBBLICITARIO SUGGERITO:  <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
			<p class="body-03 u-mb-large">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
				I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>

				<p class="label-03">FORMATO PUBBLICITARIO SUGGERITO:  <strong>FAI CONOSCERE LA TUA ATTIVITA’</strong></p>
				<p class="body-03">Se hai una pagina su Instagram o su Facebook dove inserisci giornalmente il tuo menù, usala come pagina di atterraggio del formato pubblicitario “fai conoscere la tua attività”.
					I Clienti potranno seguirti ed essere aggiornati su tutto ciò che pubblichi sui tuoi canali Social.</p>		
		</div>
	</label>
	{% endfor %}
</div>


        
            
            {
  "type": "checkbox",
  "icon": "#icon-chevron-down"
}

File:

Content:


                                // Name:            accordion
// Description:     Shows accordion component
//
// Component:       `c-accordion`
//
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-accordion {
  // Custom properties
  // ======================================================================
  
  --label-bg: var(--background-color);
  --label-active-bg: var(--background-color-gray);
  --label-hover-bg: var(--background-color-gray);
  --label-border: var(--divider-color);

  // ======================================================================

  border-top: 0;
  border-right: 1px;
  border-bottom: 1px;
  border-left: 1px;
  border-style: solid;
  border-color: var(--divider-color);

  @media (prefers-color-scheme: dark) {
    body[data-channel*="dossier"]:not([data-color-scheme*="light"]) &,
    body[data-actual-url="/signup/premium-products/"]:not(
        [data-color-scheme*="light"]
      )
      & {
      --label-bg: #{$approfondimento-gray-darker};
      --label-active-bg: #{$approfondimento-gray-darker};
      --label-hover-bg: #{$approfondimento-gray-darker};
    }
  }

  body[data-model*="approfondimento"] & {
    border: none;
  }

  &__label {
    border-top: 1px solid var(--label-border);
    background-color: var(--label-bg);

    label:first-of-type & {
      border: none;
    }

    &:hover {
      background-color: var(--label-hover-bg);
      transition: background-color 0.3s ease-in-out, border-top 0.3s ease-in-out;
    }
  }

  &__body {
    height: 0;
    overflow: hidden;
    opacity: 0;
  }

  input:checked {
    ~ .c-accordion__label {
      background-color: var(--label-active-bg);
      box-shadow: inset 0 4px 0 var(--theme-color);
      transition: background-color 0.3s ease-in-out, border-top 0.3s ease-in-out;

      body[data-model*="approfondimento"] & {
        box-shadow: none;
      }

      .o-icon {
        transform: rotate(180deg);
        transition: transform 0.3s ease-in-out;
      }
    }

    ~ .c-accordion__body {
      height: auto;
      padding: $padding-base;
      overflow: auto;
      opacity: 1;
      transition: height 0.3s ease-in-out, opacity 0.6s ease-in-out;
    }
  }

  // approfondimento custom values

  body[data-channel*="dossier"] &,
  body[data-actual-url="/signup/premium-products/"] & {
    --label-bg: #{$approfondimento-gray-lighter};
    --label-active-bg: #{$approfondimento-gray-lighter};
    --label-hover-bg: #{$approfondimento-gray-lighter};
  }

  body[data-color-scheme*="dark"][data-channel*="dossier"] &,
  body[data-color-scheme*="dark"][data-actual-url="/signup/premium-products/"]
    & {
    --label-bg: #{$approfondimento-gray-darker};
    --label-active-bg: #{$approfondimento-gray-darker};
    --label-hover-bg: #{$approfondimento-gray-darker};
  }
}

URL: /components/raw/accordion/accordion.scss
Filesystem Path: src/lib/components/accordion/accordion.scss
Size: 3.1 KB

Handle: @accordion--checkbox
Variants (2): Default , Checkbox
Preview:
- With layout
- Component only
Filesystem Path: src/lib/components/accordion/accordion.njk

Accordion

The accordion is a component particulary useful when you want to optimize screen place, while allowing users to expand or collapse information sections

Variations

Possible layout variations:

Default - only one label open at time. The open one cannot be closed by clicking on it.
Checkbox - only one or more than one label open at the same time. The single label can be closed by clicking on it.

Usage

Render default accordion

In order to display a default accordion use following syntax:

  {% render "@accordion--default" %}

Render checkbox accordion

In order to display a checkbox accordion use following syntax:

  {% render "@accordion--checkbox" %}