Accordion examples

Show params

Params

params:
- name: idPrefix
  type: string
  required: true
  description: String to prefix id for each accordion item if no id is specified on each item.
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
- name: allowToggle
  type: boolean
  required: false
  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
- name: allowMultiple
  type: boolean
  required: false
  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
- name: heading
  type: object
  required: false
  description: Options for the heading
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the heading.
- name: showControl
  type: boolean
  required: false
  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
- name: items
  type: array
  required: true
  description: Array of accordion items objects.
  params:
  - name: headerText
    type: string
    required: true
    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
  - name: headerHtml
    type: string
    required: true
    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Id to add to the item. Not required, but recommended to improve the accessibility.
  - name: open
    type: boolean
    required: false
    description: If true, accordion item will be expanded.
  - name: classes
    type: string
    required: false
    description: Classes to add to the accordion item element.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the accordion item.
- name: classes
  type: string
  required: false
  description: Classes to add to the accordion container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the accordion container.

default

Assumes allowMultiple and allowToggle are both false

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "accordion-example",
  "headingLevel": 3,
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
  </div>
  <div class="Accordion">
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="accordion-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="accordion-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="accordion-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-1"
            aria-expanded = "false"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="accordion-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="accordion-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="accordion-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

Allow multiple

allowMultiple = true. Assumes allowToggle is true

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "allowmultiple-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
  </div>
  <div class="Accordion" data-allow-multiple>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="allowmultiple-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowmultiple-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="allowmultiple-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="allowmultiple-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowmultiple-example-1"
            aria-expanded = "false"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="allowmultiple-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="allowmultiple-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowmultiple-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="allowmultiple-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

Allow toggle

allowToggle = true. Assumes allowMultiple is false

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "allowtoggle-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
  </div>
  <div class="Accordion" data-allow-toggle>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="allowtoggle-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowtoggle-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="allowtoggle-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="allowtoggle-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowtoggle-example-1"
            aria-expanded = "false"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="allowtoggle-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="allowtoggle-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="allowtoggle-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="allowtoggle-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

With one item opened

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "with-one-item-opened-example",
  "headingLevel": 3,
  "allowToggle": true,
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "open": true
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
  </div>
  <div class="Accordion" data-allow-toggle>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="with-one-item-opened-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-one-item-opened-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="with-one-item-opened-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="with-one-item-opened-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-one-item-opened-example-1"
            aria-expanded = "true"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Ocultar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          id="with-one-item-opened-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="with-one-item-opened-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-one-item-opened-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="with-one-item-opened-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

With 2 items opened

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "with-2-items-opened-example",
  "headingLevel": 3,
  "allowMultiple": true,
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "open": true
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "open": true
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
  </div>
  <div class="Accordion" data-allow-multiple>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="with-2-items-opened-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-2-items-opened-example"
            aria-expanded = "true"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Ocultar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          id="with-2-items-opened-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="with-2-items-opened-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-2-items-opened-example-1"
            aria-expanded = "false"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="with-2-items-opened-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="with-2-items-opened-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="with-2-items-opened-example-2"
            aria-expanded = "true"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Ocultar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          id="with-2-items-opened-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

With heading

Accordion example

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "heading-example",
  "headingLevel": 3,
  "heading": {
    "text": "Accordion example"
  },
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
      <h3 class="c-h2 mb-base">Accordion example</h3>
  </div>
  <div class="Accordion">
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="heading-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="heading-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="heading-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-example-1"
            aria-expanded = "false"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="heading-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="heading-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="heading-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

With heading level 4

headingLevel is 4 in this example. The headings in this component start with h4 in this example. h4 for the heading and h5 inside the buttons.

This header starts with h4

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "accordion-heading-level-example",
  "headingLevel": 4,
  "heading": {
    "text": "This header starts with h4"
  },
  "items": [
    {
      "headerText": "This is Item 1 with h5",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "This is Item 2 with h5",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "This is Item 3 with h5",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
      <h4 class="c-h2 mb-base">This header starts with h4</h4>
  </div>
  <div class="Accordion">
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h5>          <button
          id="accordion-heading-level-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-heading-level-example"
            aria-expanded = "false"
          >
            This is Item 1 with h5
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h5>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="accordion-heading-level-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h5>          <button
          id="accordion-heading-level-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-heading-level-example-1"
            aria-expanded = "false"
          >
            This is Item 2 with h5
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h5>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="accordion-heading-level-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h5>          <button
          id="accordion-heading-level-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="accordion-heading-level-example-2"
            aria-expanded = "false"
          >
            This is Item 3 with h5
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h5>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="accordion-heading-level-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

With heading and show controls

Accordion example

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "heading-and-show-controls-example",
  "headingLevel": 3,
  "heading": {
    "text": "Accordion example"
  },
  "showControl": true,
  "allowMultiple": true,
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "open": true
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}">
  <div class="flex justify-between">
      <h3 class="c-h2 mb-base">Accordion example</h3>
    <button
    x-ref="button"
    @click="toggleShow"
    x-text="buttonText"
    class="ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus">
      Mostrar todo
    </button>
  </div>
  <div class="Accordion" data-allow-multiple>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="heading-and-show-controls-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-and-show-controls-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="heading-and-show-controls-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="heading-and-show-controls-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-and-show-controls-example-1"
            aria-expanded = "true"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Ocultar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          id="heading-and-show-controls-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="heading-and-show-controls-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="heading-and-show-controls-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="heading-and-show-controls-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

With classes applied

Show code to display the classes applied in html

Accordion example

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "classes-example",
  "headingLevel": 3,
  "classes": "p-base bg-warning-light",
  "heading": {
    "text": "Accordion example",
    "classes": "c-h2 mb-lg uppercase"
  },
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "classes": "py-sm bg-white rounded-lg",
      "open": true
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}" class="p-base bg-warning-light">
  <div class="flex justify-between">
      <h3 class="c-h2 mb-lg uppercase">Accordion example</h3>
  </div>
  <div class="Accordion">
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="classes-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="classes-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="classes-example"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="classes-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="classes-example-1"
            aria-expanded = "true"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Ocultar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          id="classes-example-1"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="classes-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="classes-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="classes-example-2"
        class="Accordion-panel">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->

With attributes applied

Show code to display the attributes applied in html

Show code

Macro

{% from "components/accordion/_macro.accordion.njk" import componentAccordion %}
{{ componentAccordion({
  "idPrefix": "attributes-example",
  "headingLevel": 3,
  "attributes": {
    "id": "accordion-test"
  },
  "items": [
    {
      "headerText": "Accordion Item 1",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-a"
      }
    },
    {
      "headerText": "Accordion Item 2",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-b"
      }
    },
    {
      "headerText": "Accordion Item 3",
      "html": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
      "attributes": {
        "data-attr": "accordion-item-test-c"
      }
    }
  ]
})  }}

Markup

<!-- accordion -->
<div
x-ref="accordion"
x-data="{
  showAll: true,
  buttonText: 'Mostrar todo',
  toggleShow: function(){
    var buttons = this.$refs.accordion.querySelectorAll('.Accordion-trigger');
    buttons.forEach((button) => {
      if(this.showAll == true){
        if(button.getAttribute('aria-expanded') == 'false'){
          button.click();
        }
      } else {
        if(button.getAttribute('aria-expanded') == 'true'){
          button.click();
        }
      }
    });
    this.showAll = !this.showAll;
    if(this.showAll) {
      this.buttonText = 'Mostrar todo';
    } else {
      this.buttonText = 'Ocultar todo';
    }
  }
}" id="accordion-test">
  <div class="flex justify-between">
  </div>
  <div class="Accordion">
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="attributes-example-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="attributes-example"
            aria-expanded = "false"
          >
            Accordion Item 1
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="attributes-example"
        class="Accordion-panel" data-attr="accordion-item-test-a">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="attributes-example-1-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="attributes-example-1"
            aria-expanded = "false"
          >
            Accordion Item 2
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="attributes-example-1"
        class="Accordion-panel" data-attr="accordion-item-test-b">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
<div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
          <h4>          <button
          id="attributes-example-2-title"
          class="Accordion-trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
          aria-controls="attributes-example-2"
            aria-expanded = "false"
          >
            Accordion Item 3
            <span
              class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">
                  Mostrar
              </span>
          </button>
</h4>
        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
        <div
          hidden = ""
          id="attributes-example-2"
        class="Accordion-panel" data-attr="accordion-item-test-c">
          <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
        </div>
      </div>
  </div>
</div>
<!-- /accordion -->