Programatically show/hide accordion: bug or am I doing it wrong?

[RSchmitzHH]

Summary

Programatically opening and closing accordion works once, then stops working.

Steps to Reproduce

I have this accordion

    <div
      class="hs-accordion active group cursor-pointer p-4 min-w-full w-full max-w-full flex flex-col justify-center bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700"
      :id="accordionId"
    >

In my onMounted, I (sucessfully) create a ref

onMounted(async () => {
  await nextTick(async () => {
    HSStaticMethods.autoInit();
    accordion.value = new HSAccordion(document.getElementById(accordionId.value));
...

I can now show and hide this accordion using accordion.value.hide() and accordion.value.hide().

However, this cycle works only once. The second time I want to show, nothing happens. accordion.value is still valid and references the accordion.

A functioning workaround is

    <div
      class="hs-accordion group cursor-pointer p-4 min-w-full w-full max-w-full flex flex-col justify-center bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700"
      :class="{
        'active': showAccordiong,
      }"
      :id="accordionId"
    >

where I additionally with calling show() and hide(), I set showAccordiong to true and false, respectively.

However, following your documentation, this should not be necessary, should it?

Am I doing something wrong?

Cheers

Demo Link

N/A

Expected Behavior

Calling accordion.value.show() and 'accordion.value.hide()' shall show and hide the accordion, respectively.

Actual Behavior

Calling accordion.value.show() and 'accordion.value.hide()' shows and hide the accordion once, but then stops working. Additionally setting/ removing 'active' as a conditional class functions as a workaround (c.f. above).

Screenshots

No response

[olegpix]

Summary

Programatically opening and closing accordion works once, then stops working.

Steps to Reproduce

I have this accordion

    <div
      class="hs-accordion active group cursor-pointer p-4 min-w-full w-full max-w-full flex flex-col justify-center bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700"
      :id="accordionId"
    >

In my onMounted, I (sucessfully) create a ref

onMounted(async () => {
  await nextTick(async () => {
    HSStaticMethods.autoInit();
    accordion.value = new HSAccordion(document.getElementById(accordionId.value));
...

I can now show and hide this accordion using accordion.value.hide() and accordion.value.hide().

However, this cycle works only once. The second time I want to show, nothing happens. accordion.value is still valid and references the accordion.

A functioning workaround is

    <div
      class="hs-accordion group cursor-pointer p-4 min-w-full w-full max-w-full flex flex-col justify-center bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700"
      :class="{
        'active': showAccordiong,
      }"
      :id="accordionId"
    >

where I additionally with calling show() and hide(), I set showAccordiong to true and false, respectively.

However, following your documentation, this should not be necessary, should it?

Am I doing something wrong?

Cheers

Demo Link

N/A

Expected Behavior

Calling accordion.value.show() and 'accordion.value.hide()' shall show and hide the accordion, respectively.

Actual Behavior

Calling accordion.value.show() and 'accordion.value.hide()' shows and hide the accordion once, but then stops working. Additionally setting/ removing 'active' as a conditional class functions as a workaround (c.f. above).

Screenshots

No response

Hi,

This may be due to the fact that you are using HSStaticMethods.autoInit() and at the same time creating the component using the constructor ("new HSAccordion").

To better understand the problem, could you fork one of our demo versions and add your code please. You can find demos here https://stackblitz.com/@jahaganiev, just create a fork and add your code. It’s important for us to understand your specific problem, that’s why it’s very important to fork and add your custom code that doesn’t work for you.

Thanks!

[RSchmitzHH]

Hi @olegpix , many thanks for your reply, will try without autoInit. I will also do the fork and add my code for your experiments -- highly appreciated that you want to look into it in detail. However, this will take some time. Cheers!

[jahaganiev]

Hey @RSchmitzHH - we will revisit once the StackBlitz link is shared. Thanks!