jQuery Accordion Inside Ionic-Content

ionic-v1
1

I would like to implement this accordion into my ionic-content region - Zozo Accordion

It seems to break the script when I use it in my Ionic project.

Is there an easy way to do this so that I can have my jQuery accordion inside of a scrollable region?

Do I need to build this as a module?

So confused! Thoughts?

2

It’s not really advisable to mix Angular and jQuery - with that said, it’s been done. Here’s a post on using jQuery with Ionic:

However, if you are just looking for an accordion, Ionic has that ability. You could style it to be more like the jQuery one. I didn’t see if it does anything special.

3

Thanks! I found this accordion already but it’s terribly basic. I need it to be infinitely more complex.

  1. Nested sections that go at least 4 levels deep.
  2. Being able to keep all the accordion groups open at the same time instead of one at a time
  3. More control over styling and layout.
  4. Vertical and horizontal orientations

etc, etc…

That code example just doesn’t cut it. Heck, it doesn’t even match the functionality of the Angular Bootstrap accordion directive: https://angular-ui.github.io/bootstrap/#/accordion

But the bootstrap accordion is a dog. It’s terribly slow compared to the codepen that you linked to.

4

The Ionic code pen is pretty fast and intuitive to use. Even I advise against using jQuery with Angular.
If you are looking for vertical sliders you just use CSS transforms to do it.

transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
1 Like