No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Expansion Items: Only Open One Item at a Time

    Help
    3
    6
    727
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      Julia last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        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

        1 Reply Last reply Reply Quote 0
        • J
          Julia last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            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

            1 Reply Last reply Reply Quote 0
            • J
              Julia last edited by

              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.

              1 Reply Last reply Reply Quote 1
              • PeterQF
                PeterQF last edited by PeterQF

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

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post