Class: Accordion

new Accordion(default_open)

Parameters:

Name	Type	Description
default_open	string	panel que estará abierto por defecto

Source:

• layout/Accordion.js, line 8

Example

<accordion default_open="1">
  <accordion_item options='{"className":"card card-style"}'>
    <div class="card-header d-flex">
      <div class="align-self-center">
        <h6 class="pt-1 font-14 font-600">Factura 0000-111111</h6>
      </div>
      <div class="align-self-center ms-auto text-end">
        <h6 class="pt-1 font-14 font-600">10/03/2022</h6>
      </div>
    </div>
    <accordion_header target="1">
      <!-- header --> 
      <div class="card-body d-flex mb-2" style="height: auto; padding: 0.5rem 1rem;">
        <div class="align-self-center" style="max-width: 240px">
          <h6 class="mb-n1 font-12 opacity-60">Heladera con Freezer Gafa 282 Litros</h6>
          <h6 class="pt-1 mb-n1 font-12 opacity-60">Smart TV 43" Samsung</h6>
          <h6 class="pt-1 mb-n1 font-12 opacity-60">Aire Acondicionado Split</h6>
        </div>
        <div class="align-self-center ms-auto text-end pt-1">
          <p class="mb-0 font-11 opacity-70" style="line-height: 10px">Monto a pagar</p>
          <p class="mb-0 font-15 color-blue-dark font-700">$20.000,00</p>
          <p class="mb-0 font-11 opacity-70" style="line-height: 10px">Vence</p>
          <p class="mb-0 font-13 color-blue-dark font-700">19/03/2022</p>
        </div>
      </div>
      <!-- comprobante fin -->  
    </accordion_header>
    <accordion_body id="1">
      <strong>
        This is the second item's accordion body.
      </strong>
      You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the{' '}
      <code>
        .accordion-body
      </code>
      , though the transition does limit overflow.   
    </accordion_body>
  </accordion_item>
  <accordion_item>
    <accordion_header target="2">
      Titulo 2
    </accordion_header>
    <accordion_body id="2">
      <strong>
        This is the second item's accordion body.
      </strong>
      You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the{' '}
      <code>
        .accordion-body
      </code>
      , though the transition does limit overflow.   
    </accordion_body>
</accordion>
<style>
  .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
</style>