collapse each <b-collapse> when a button is clicked (initially shown)

I am facing an issue with a series of connected b-buttons and b-collapse, all initially set to be visible (open).

My goal is to hide them all when a toggle from my parent.vue component is activated - so upon clicking a button in the parent component, I want all collapses in the child component to close. Then, if I trigger the toggle again and open the complete collapse, I want all collapses in the child component to remain closed.

What would be the best way to achieve this?

Parent.vue

<b-button class="col-5" v-b-toggle="'New' + item.id" variant="danger">
<Child :idParent="item.id"/>

Child.vue

<b-collapse visible :id="'New' + idParent">
  
  <b-button v-b-toggle="Toggle1"></b-button>
  <b-collapse visible id="Toggle1"></b-collapse>

  <b-button v-b-toggle="Toggle2"></b-button>
  <b-collapse visible id="Toggle2"></b-collapse>

  <b-button v-b-toggle="Toggle3"></b-button>
  <b-collapse visible id="Toggle3"></b-collapse>

</b-collapse>
javascriptvue.jsvuejs2

Answer №1

To accomplish this task, one method is to define a boolean variable called 'visible' in the parent component. This variable can be toggled by a button click event and then passed down to the child component for use in controlling the visibility of button elements. Here's an example:

Parent.vue

<b-button class="col-5" v-b-toggle="'New' + item.id" variant="danger" @click="!buttons_visible">
<Child :idParent="item.id" :buttons_visible="buttons_visible" />

Child.vue

<b-collapse visible :id="'New' + idParent">
  <b-button v-b-toggle="Toggle1"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle1"></b-collapse>

  <b-button v-b-toggle="Toggle2"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle2"></b-collapse>

  <b-button v-b-toggle="Toggle3"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle3"></b-collapse>
</b-collapse>

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

Masked input fails to accurately capture data

When utilizing VueJS together with the Quasar framework. An issue arises when using a masked q-input, where the value becomes incorrect after a toggle. For instance, if we start with a default value of: officeNum: 654321, mobileNum: 12345678, Then our ...

javascriptnode.jsvue.jsquasar-framework

Storing the order of jQuery UI Sortable in the WordPress Admin Panel

My goal is to customize the order of taxonomy terms for each individual post in Wordpress. I have created a metabox on the EDIT POST page that contains custom taxonomy terms and made them sortable using JQuery. Here is my setup on the Wordpress backend: ...

javascriptjqueryajaxwordpressjquery-ui

What could be causing the Twitter Timeline to fail to load based on a variable in a Vue.js component?

My goal is to display the Twitter timeline of multiple accounts based on the route. I initially attempted to use a plugin called vue-tweet-embed, but encountered issues with it. As a result, I resorted to the traditional method by embedding twitter's ...

javascriptvue.jstwittervuejs2vue-component

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

javascriptjqueryhtmlcss

What is the process for sending Raw Commands to a Receipt Printer using Node.JS?

My Current Project I am currently working on integrating a receipt printer that supports ESC/P raw printing into an app for remote printing of receipts. The Approach I Am Taking To achieve this, I am utilizing the PrintNodes API to send data from my app ...

javascriptnode.jsprintingbufferescpos

Tips for clearing a saved password in a browser using Angular.js and Javascript

There is an issue with the password and username fields in my Angular.js login page. When a user clicks on the 'remember me' option in their browser after logging in, the saved username and password are automatically displayed in the respective f ...

javascripthtmlangularjs

Picture is currently not showing up in the division

I am currently working on an HTML page and I'm having trouble displaying an image within a division element. Below is the code snippet I tried: Here is the JavaScript part of my code: var filename = "andrew.png"; $("#detected").show().html('< ...

javascriptjqueryhtml

Mouseover event in VueJS loopIs there a way to incorporate

I am working on a form that generates a component for each index. Within this component, there is a child div with edit, add, and minus buttons. I want these buttons to be displayed upon mouseover of the component. How can I achieve this dynamically with ...

for-loopvue.jsmouseover

Concealing overflow for text content through CSS styling

I am currently working with an element that contains both an image and text. View the Fiddle here Note: To see the full grid, resize the preview accordingly. The CSS I have written is as follows: .gridster .gs-w .item{ position: relative; wi ...

javascriptjquerycssgridster

using javascript to retrieve php variables

After creating a webpage, setting up Apache2 on an Ubuntu server to access it over the internet, and installing PHP5 and MySQL, I encountered issues with accessing database information on my page through a .php file. Despite having a file named test.php th ...

javascriptphphtmlmysql

Node.js not resetting array properly

I have successfully set up a Node+Express API that is working smoothly, but I am facing an issue with returning responses for complex queries. The problem lies in the fact that the variable where I store the response data is not being reset between differe ...

javascriptnode.jsexpressvariablesecmascript-6

Uploading files into an array using Angular 2

Struggling to incorporate an uploader within an array: I've got an array of users displayed in a table using "ng-repeat". I want to add a column with a button to upload an image for each user. Currently, I'm utilizing ng2-file-upload, but open t ...

javascriptangularfile-uploadng2-file-upload

Utilize Axios to send data in real-time to update any changes made to an input field in

Just wanted to write about this topic because I have a burning question. (Please note that the code in this post is just an example). I'm struggling with sending the input content of name_contact on each change without using a button. Is it even poss ...

javascriptreactjsaxioshandle

An iteration in Javascript/NodeJS using the forEach loop

I am working with a forEach Loop in my code: <% users.forEach(function(user) { %> <tr> <td><%= user.studio %></td> <td><%= user.name %></td> <td><%= user.email %></td> ...

javascriptnode.js

I'm having trouble with res.redirect, why isn't it redirecting me as expected?

In my login controller, I have a form that updates the user's scope when they click a button triggering the login() function. .controller('loginCtrl', ['$scope','$http',function($scope,$http) { $scope.user = { ...

javascriptangularjsnode.jsexpresspassport.js

Using TypeScript to import a Vue 2 component into a Vue 3 application

Recently, I embarked on a new project with Vue CLI and Vite, utilizing Vue version 3.3.4 alongside TypeScript. In the process, I attempted to incorporate the vue-concise-slider into one of my components. You can find it here: https://github.com/warpcgd/vu ...

typescriptvue.jsimportvuejs3vue-component

Sending JSON Data from C# to External JavaScript File without Using a Web Server

Trying to transfer JSON data from a C# (winforms) application to a static HTML/JavaScript file for canvas drawing without the need for a web server. Keeping the HTML file unhosted is preferred. Without involving a server, passing data through 'get&ap ...

javascriptc#jqueryjsonhtml

Creating a Vue.js component during the rendering process of a Laravel Blade partial view

In my Vue.js project, I have a component that is used in a partial view called question.blade.php: {{--HTML code--}} <my-component type='question'> <div class="question">[Very long text content...]</div> </my-component& ...

javascriptajaxlaravelvue.js

Encountering an issue where I am unable to access properties of undefined (specifically 'up') within Material UI styling

I encountered an error message Uncaught TypeError: Cannot read properties of undefined (reading 'up') while executing the code snippet below: I am having trouble with compiling my react js Code Snippet from Index.js import React from 'react ...

javascriptreactjsmaterial-uimaterial-design

What is causing the failure of vue unit tests due to VIcon?

I'm currently writing unit tests for Vuetify components, and while most of them are functioning properly, some components like checkboxes and autocomplete are failing to mount. The error message I am receiving is: Cannot read properties of undefined ( ...

vue.jsvuetify.jsvue-test-utils