<div class="accordion ">
<ul class="accordion__list">
<li class="accordion__item">
<button class="
accordion__trigger
active
" type="button">
<span class="bodycopy-l">TIN</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>TIN significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">TAE</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>TAE significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy">EURIBOR</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>EURIBOR significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">Tasa de compensación</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>Tasa de compensación significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="accordion {{accordion-init}}">
{{#if isOrdered}}
<ol class="accordion__list">
{{else}}
<ul class="accordion__list">
{{/if}}
{{#each item}}
<li class="accordion__item">
<button class="
accordion__trigger
{{accordion__trigger-init}}
{{#if isActive}}active{{/if}}
" type="button">
{{> @bodycopy this.trigger }}
{{#if isAccentChebron}}
{{ render '@icon--chebron-down-accent' }}
{{else}}
{{ render '@icon--chebron-down' }}
{{/if}}
</button>
<div class="accordion__item-content {{accordion__item-content-init}}">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
{{> @bodycopy-m this.description }}
{{#if content-payroll}}
<div class="font-style-1">
{{> '@bodycopy-s' this.header}}
</div>
{{ render '@btn-upload--awaiting-validation' }}
{{ render '@btn-upload--validated' }}
{{ render '@btn-upload--cancelled' }}
{{ render '@btn-upload--warning' }}
{{ render '@btn-upload--default' }}
{{/if}}
{{#if content-dni}}
<div class="font-style-1">
{{> '@bodycopy-s' this.header}}
</div>
{{ render '@btn-upload--validated' }}
{{ render '@btn-upload--default' }}
{{/if}}
{{#if content-bank}}
<div class="font-style-1">
{{> '@bodycopy-s' this.header}}
</div>
{{ render '@btn-upload--default' }}
{{/if}}
{{#if content-valid}}
<div class="font-style-1 content-validated">
{{> '@bodycopy-s' this.header-payroll}}
</div>
{{ render '@btn-upload--validated' }}
{{ render '@btn-upload--validated' }}
<div class="font-style-1 content-validated">
{{> '@bodycopy-s' this.header-dni}}
</div>
{{ render '@btn-upload--validated' }}
{{ render '@btn-upload--validated' }}
{{/if}}
{{#if content-fouthStepSignature}}
{{#each state-signature}}
<span class="title-section bodycopy-m "><span class="item">{{{
this.signature-section }}}</span><span
class="item text-label-m title-section--state {{{ this.state}}}">{{{
this.signature-state }}}</span></span>
{{/each}}
{{/if}}
{{#if content-fouthStepNotario}}
<div class="head-step">
{{{this.textNotario}}}
</div>
{{/if}}
{{#if content-fouthStepCompletedNotario}}
<div class="body-step contact">
<p class="contact-item">
<a class="link" href="tel:691527843:">{{ render '@icon--tel' }}691 527 843 -
</a> <span class="popup__comercial-text bodycopy-xs"> Lunes a viernes de
10:00 a 18:00
</p>
<p class="contact-item">
<a class="link" href="mailto:tunotario@gestmurcia.com">{{ render
'@icon--mail' }} tunotario@gestmurcia.com</a>
</p>
</div>
{{/if}}
{{#if content-fouthStepGestoria}}
<div class="head-step">
<span class="bodycopy-m">Contacta con <span>Alfredo</span>, tu comercial.</span>
</div>
<div class="body-step contact">
<p class="contact-item">
<a class="link" href="tel:661567898:">{{ render '@icon--tel' }}661 567 898 -
</a> <span class="popup__comercial-text bodycopy-xs"> Lunes a viernes de
10:00 a 18:00
</p>
<p class="contact-item">
<a class="link" href="mailto:marinavaldes14@gmail.com">{{ render
'@icon--mail' }} marinavaldes14@gmail.com</a>
</p>
</div>
{{/if}}
{{#if content-fouthStepSignature}}
{{#each state-document}}
<span class="title-section bodycopy-m ">{{{ this.document-section }}}<span
class="text-label-m title-section--state {{{ this.state}}}">{{{
this.document-state }}}</span></span>
{{/each}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
</li>
{{/each}}
{{#if isOrdered}}
</ol>
{{else}}
</ul>
{{/if}}
</div>
{
"item": [
{
"isAccentChebron": true,
"isActive": true,
"trigger": {
"text": "TIN",
"type": "-l"
},
"description": {
"text": "<p>TIN significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>"
}
},
{
"isAccentChebron": true,
"trigger": {
"text": "TAE",
"type": "-l"
},
"description": {
"text": "<p>TAE significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>"
}
},
{
"isAccentChebron": true,
"trigger": {
"text": "EURIBOR"
},
"description": {
"text": "<p>EURIBOR significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>"
}
},
{
"isAccentChebron": true,
"trigger": {
"text": "Tasa de compensación",
"type": "-l"
},
"description": {
"text": "<p>Tasa de compensación significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>"
}
}
]
}
.accordion {
&__trigger {
position: relative;
width: 100%;
padding: 20px 20px 20px 0;
text-align: left;
.icon {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
display: block;
width: 12px;
height: 12px;
transition: all 0.4s;
}
&.active {
.icon {
transform: translate(0, -50%) rotate(-180deg);
}
}
}
&__item {
border-bottom: 1px solid var(--color-secondary-light);
&:first-child {
.accordion__item-content {
display: block;
}
}
&-content {
display: none;
&-wrapper {
padding-bottom: 20px;
}
}
}
ol{
li{float:left;width: 100%;list-style: decimal; list-style-position: inside; padding-top: 20px;
&::marker{padding-top: 3px;}
.accordion__trigger{
width: calc(100% - 35px);
float: right;
padding-top: 0;
}
.accordion__item-content{
float: left;
width: 100%;
}
ul{
li{float:none; list-style: none; padding-top: 0; width:50%;
@media (--viewport-ms-max) {
width: 100%;
}
}
}
}
}
}
Variantes: Default, Ordered list, Subsidy finder.