Exemple d'accordéon avec bouton radio

Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.

Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.

Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.

Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.

Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.

FreeMarker

<@cRow>
<@cCol>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion' value='acc1' inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion'  value='acc2'  inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion'  value='acc3'  inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion'  value='acc4'   inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion' value='acc5' inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
</@cCol>
</@cRow>

Style

.radio-accordion{ 
    position: relative;
    } 

.custom-radio.radio-accordion:first-of-type:not( .custom-control-inline ){ 
    padding-top: .75rem
    } 

.radio-accordion::after{ 
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 -6 32 45'%3e%3cpath fill='%23071F32' d='M16 16.172l4.586-4.586 2.828 2.828L16 21.828l-7.414-7.414 2.828-2.828z'/%3e%3c/svg%3e");
    position: absolute;
    width: 24px;
    height: 24px;
    right: 0;
    top: 0;
} 

.radio-accordion[aria-expanded="true"]::after{ 
    transform: rotate(180deg) translateY(-15px);
    transition: transform .3s ease;
    } 
    .radio-accordion:hover{ 
    cursor: pointer;
    }

JS


$( function(){
    $('.radio-accordion-label').toggle()
    $('.radio-accordion').attr('aria-expanded','false');
    $('.radio-accordion:not(".custom-control-input")').on('click', function(){
        $(this).children('.radio-accordion-label').toggle();
        if ( $(this).attr('aria-expanded') === 'false' ){
            $(this).attr('aria-expanded','true' )
        } else {
            $(this).attr('aria-expanded','false' )
        }
    })
})

Exemple d'étapes avec images FC

FreeMarker

<#assign lstep = [
{"title":"Je m'informe sur le", "url":"images/fa-battery-0.png"},
{"title":"Je certifie mon identité", "url":"images/franceconnect-bouton.svg"},
{"title":"Je choisis ma demande", "url":"images/fa-battery-2.png"},
]>
...
<@cInfoStep lstep true true />

Style

.list-idx li:nth-child(2) figure .img-fluid{ 
    max-width: 150%;
}

Exemple de Composant "Mise en avant"

Votre QF

Le quotient familial de votre attestation s'élève à 1045 € , vous faites partie de la tranche tarifaire 5 (T05)

Phosfluorescently predominate

Phosfluorescently predominate one-to-one expertise before bricks-and-clicks leadership skills. Monotonectally target intuitive total linkage for resource-leveling experiences. Synergistically innovate premium internal or "organic" sources for maintainable markets. Synergistically mesh best-of-breed products vis-a-vis front-end ROI. Assertively repurpose plug-and-play platforms vis-a-vis resource sucking best practices.

FreeMarker

<@cContentFrame title='Votre QF'> Le quotient familial de votre attestation s'élève à 1045 € , vous faites partie de la tranche tarifaire 5 (T05) </@cContentFrame> <#list animals as animal> ${animal.name}${animal.price} Euros

Style

/* TODO */

  1. Etape Vide

    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

  2. Etape 50%

    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper human

  3. Etape 100%

    Contenu de mon étape à ajouter en sus du reste

  1. Etape Vide

    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

  2. Etape 50%

    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper human

  3. Etape 100%

    Contenu de mon étape à ajouter en sus du reste

  1. Etape Vide

    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

  2. Etape 50%

    One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper human

  3. Etape 100%

    Contenu de mon étape à ajouter en sus du reste