Creating a single Vuetify expansion panel: A step-by-step guide

Is there a way to modify the Vuetify expansion panel so that only one panel can be open at a time? Currently, all panels can be closed which is causing issues. I would like the last opened panel to remain open.

I also want to prevent closing the currently open panel if it is clicked on again.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63151606170a051a23514dsgdfg54dsfg8dstyger">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4a495948555a457c0e120c12ytfd5vdflkfghdgfhgdhgfjdftdkdd">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1365667653213d6b">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-expansion-panels accordion>
        <v-expansion-panel
          v-for="(item,i) in 5"
          :key="i"
        >
          <v-expansion-panel-header>Item</v-expansion-panel-header>
          <v-expansion-panel-content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>
  </v-app>
</div>

Check out my CodePen for the code

javascripthtmlcssvue.jsvuetify.js

Answer №1

For a possible solution, you can check out this link: https://codepen.io/kdydesign/pen/BaBeeVO?editors=1011

<v-expansion-panels v-model="panel">
  <v-expansion-panel
        v-for="(item,i) in 5"
        :key="i"
        @click="expanded(i)"
  >
     ......
  </v-expansion-panel>
</v-expansion-panels>

data () {
  return {
    panel: []
  }
},
methods: {
  expanded (index) {
    this.panel = []
    this.panel.push(index)
  }

Answer №2

const app = new Vue({
  el: '#app',
  vuetify: new Vuetify()
})
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53252636273a352a13617d63">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f086859584999689b0c2dec1c9">[email protected]</a>/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-expansion-panels accordion multiple>
        <v-expansion-panel
          v-for="(item,i) in 5"
          :key="i"
        >
          <v-expansion-panel-header>Item</v-expansion-panel-header>
          <v-expansion-panel-content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>
  </v-app>
</div>

Simply include a multiple attribute to achieve the desired outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript/AJAX Functionality Only Operates Correctly During Debugging

I am currently facing an issue with dynamically populating a website. The code works perfectly when I step through it, but it fails to work as intended on page load. Here is the relevant code snippet: <body onload="populate_all(string)";> function ...

javascriptajax

Using the <ins> element to push content into a separate div lower on the webpage

My text inside the <p> element is being pushed down by the presence of the <ins> tag. Removing the <ins> tag from the DOM using developer tools results in my text returning to its expected position. main { max-width: 1000px; ma ...

htmlcss

Enlargen div or unordered list according to content exceeding limits

What is the best way to ensure a div expands when it contains a lot of content? Code Example (HTML): <div class="content"> Content goes here <br /> Content goes here <br /> Content goes here <br /> Content goes her ...

jqueryhtmlcssxhtml

Issue in d3.js: bisector consistently returning zero

http://jsfiddle.net/rdpt5e30/1/ const data = [ {'year': 2005, 'value': 771900}, {'year': 2006, 'value': 771500}, {'year': 2007, 'value': 770500}, {'year': 2008, 'value&apos ...

javascriptarraysd3.js

The act of transferring non-textual information into web-based applications

Is it possible for a user to copy and paste a selection of pixels from MSPaint into a browser-based app using JavaScript in current browsers? If not, will HTML5 make this possible in the future? Alternatively, could something like Flex or Silverlight be us ...

javascriptapache-flexsilverlightcopy-paste

Shiny Chrome, Flexible Flexbox, and plump div elements

Looking to enhance my understanding of flexbox. Encountering a display issue in Chrome where the right column is too wide and the left column is too skinny, while it displays correctly in Firefox. Any suggestions on how to fix this for Chrome? .child ...

htmlcssgoogle-chromeflexbox

How can I design a custom status update box inspired by the look and feel of Facebook

I have searched extensively online for a guide on creating a CSS box similar to Facebook's status update callout box. This box features a square shape with a small notch at the top. Could someone assist me in crafting a CSS design for this type of bo ...

csscallout

Steps to programmatically update Node modules:

I am looking to incorporate the use of npm update within a script. Take a look at my code snippet below: var npm = require('npm'); npm.load(function () { npm.commands.outdated({json: true}, function (err, data) { //console.log(data); npm ...

javascriptnode.jsnpm

Leverage the Power of Multiple Markers on Google Maps with API Integration

My project involves creating a WordPress site that displays one marker on a map and has a list of additional locations below it. I aim to remove the description under the map and replace it with a simple list of locations alongside markers on the map. ...

javascriptphpwordpressgoogle-maps-api-3

Exploring the attributes of div elements with XPath

Currently, I am in the process of familiarizing myself with xpath through the creation of a basic program that will display the list of Premier League fixtures in football from a specific webpage. The page in question can be found at the following link: A ...

htmlparsingxpathhtml-parsinghtml-agility-pack

Improving JavaScript Functions: Minimize duplication of helper methods

I have a set of helper functions that check for the presence of specific strings in an array and certain steps before triggering other functions. The reason for keeping them separated is because arrTours must be associated with only those arrSteps. // Help ...

javascriptreactjstypescriptalgorithmfunction

Retrieving Angular URL Parameters Containing Slashes

I'm currently in the process of developing a single page angular application. This app retrieves a token from the URL and then sends it to an API. At the moment, my URL structure is as follows: www.example.com/?token=3d2b9bc55a85b641ce867edaac8a9791 ...

javascriptangularjsurlroutes

The error message appeared as a result of the bluebird and mongoose combination: TypeError: .create(...).then(...).nodeify is

Recently, I encountered an issue while attempting to integrate bluebird with mongoose. Here's the scenario: I wrote some test code using bluebird without incorporating mongoose, and it worked perfectly. The code looked something like this: A().then( ...

javascriptnode.jsmongoosebluebird

Guide: How to include a date value within a JSON format? [See code snippet below]

Currently, I am developing a react application that includes a form with sections for basic details and employment information. The form is almost completed, and I have successfully structured the data in JSON format for different sections. To see a work ...

javascriptreactjsformsdatenext.js

Prevent textArea from reducing empty spaces

I am facing an issue with my TextEdit application set to Plain Text mode. When I copy and paste text from TextEdit into a textarea within an HTML form, the multiple spaces get shrunk. How can I prevent the textarea from altering the spacing in the text? T ...

javascripthtmlcsstextareaforms

Incorporating conditional Components into Vuejs templates

I have a compilation of various events that are being brought in as logTypes export default { LOGIN: "login", LOGOUT: "logout", } Also, I have two distinct components for each of these occurrences. <LogTypeLogin :item="item ...

vue.js

Tips for ensuring that the horizontal scroll bar remains consistently positioned at the bottom of the screen

There are two div sections on a page, with one positioned on the left and the other on the right. The div on the right contains multiple dynamically generated tags which necessitate a horizontal scroll bar (overflow:auto). This causes the div's height ...

javascripthtmlcss

Incorporate JSON information into HTML dropdown menu using Google API

I'm finding it difficult with this task. Below is a list that needs the name and address inserted into the dropdown menu from the JSON file. <div class="dropdown-list"> <div class="list-container"> <ul class="list" ...

javascriptjsongoogle-maps-api-3

Issue with useEffect causing a delay in updating the state value

I'm facing an issue with a component that displays the number of people who have liked a book. The problem is, I can't seem to consistently get the correct result in my states. Here's the code snippet: ///Fetching the book details cons ...

javascriptreactjs

Exploring Vue Router: Navigating with Different Components on the Same Path

When using Vue 3 Composition API, if the components for paths "/users" and "/users/user-reference" are completely different and unrelated, how should I structure the router configuration? Possible Solutions: const routes = [ { path: '/users', ...

vue.jsvue-router