Expansion Items: Only Open One Item at a Time

[Julia]

In this codepen, I have a list of expansion items and only one should be open at any given time. I’m not sure how to accomplish this, but I have some initial thoughts:

• I should use refs to target each expansion item.
• Based on the expansion item docs, I should probably use hide ([evt]) => void 0 method to detect when a new expansion item is opened and then somehow capture that event and write a method function like the following:

closeItems(ref) {
if (!ref) {
 some logic to close all other items here....
  }
}

However, I’m not sure how to put it all together yet. I understand how to use refs, but I’m not yet very clear about how to use events with Quasar components. I’ve been searching, but I don’t see any clear examples.

Can somebody please point me to a good example for this task and/or update my codepen to show me how to make all other items close when an item opens?

[s.molinari]

You can just use the group prop. Any QExpansionItems using the same group prop name will turn into the accordion feature you are looking for.

https://codepen.io/smolinari/pen/BgaVoB?editors=1010

Scott

[Julia]

OMG, that was the simplest solution to any question I’ve ever had. Thank you!

OK, that resolves that problem. For my continuing education, I still feel I should learn more about how events work, e.g., hide ([evt]) => void 0 . Do you know of any codepens or concrete examples of how to use events like that?

[s.molinari]

All I will suggest is to make the investment and do this course at Udemy.

https://www.udemy.com/vuejs-2-the-complete-guide

I say this because, if using an event is unknown to you, there is a whole world of unknowns for you to uncover and learn. And yeah, you could try hitting and missing by doing stuff like you are doing. But, it will save both you and us time and effort, if you get some concentrated general knowledge through training. I hope you don’t take that the wrong way.

Scott

[Julia]

Yeah, I have some gaps in my knowledge. I’ll do the course because I agree that’s a more efficient path. Thank you again.

[PeterQF]

Anyone know if this is possible to do in table expansion?

Found solution here: https://codepen.io/pdanpdan/pen/eYmwryW?editors=1010