Comments (3)
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!
from preline.
Hey @RSchmitzHH - we will revisit once the StackBlitz link is shared. Thanks!
from preline.
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()
andaccordion.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!
from preline.
Related Issues (20)
- Interactivity missing in Umbraco CMS HOT 1
- I can't build my nextjs v14 app using preline
- Laravel 11 Livewire 3 issue rendering classes. HOT 2
- Advanced select's documentation copies invalid JSON when used without dark classes HOT 3
- Cannot read properties of undefined (reading 'getAttribute') In Next JS 14 HOT 1
- data-hs-combo-box-output-item attribute hydration issues HOT 2
- Open more than one offcanvas drawers HOT 1
- In Sveltekit Combox and other components HOT 2
- Bring the design system to Penpot
- Additional methods for advanced select
- Advanced Select multiple not storing multiple selected values correctly
- NextJS - HSStatic Method init twice at the same time HOT 1
- BUG: Carousel doesn't work when placed unter tab navigation
- HSOverlay.on not working HOT 3
- Module Parse Failed for HSPinInput.getInstance
- A navigation cycle produces an error HOT 2
- Switching screen size causes error HOT 2
- [Website] Add JSX code snippets in component examples
- AdvancedSelect is not submitted in the form data HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preline.