How can I expand and collapse all the Bootstrap panels simultaneously?

Is it possible to make all three panels collapse and expand simultaneously with just one button?

<button data-toggle="collapse" data-target="#collapseOne-1,#collapseTwo-1,#collapseThree-1" ...></button>

<div id="#collapseOne-1" class="collapse in"></div>
<div id="#collapseTwo-1" class="collapse in"></div>
<div id="#collapseThree-1" class="collapse in"></div>

It's currently an issue where if one panel is already collapsed, it will expand and vice versa. But I want them all to expand or close together whenever the button is clicked.

Do you know of any solutions to achieve this functionality?

javascriptcsstwitter-bootstrap

Answer №1

When I want to collapse all the panels simultaneously, I rely on the following code snippet:

$("#btnIdentifier").click(function(){
 $('.expand').collapse('hide');
});

This code essentially allows all the elements with an expand class to collapse and then proceeds to hide each one of them. If you want to display all the panels at once, you can utilize this code:

$("#btnIdentifier").click(function(){
 $('.expand').collapse('show');
});

For additional details, make sure to review the following resource: Bootstrap Documentation

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

Adding elements within a loop using jquery

I am currently working on adding a toggle button using Javascript. I want to include three span tags inside it as well. To achieve this, I am creating a span variable and attempting to append it within a basic FOR loop that iterates 3 times. Below is the ...

javascriptjqueryhtml

The authentication for npm failed with a 401 error code when attempting to log in

When attempting to sign in to npm using the command npm login and providing my username, password, and email, I am encountering the following error message: The Registry is returning a 401 status code for the PUT request. Even though I have used the sa ...

javascriptnode.jsnpm

"Refine Your Grid with a Pinterest-Inspired

I've set up a grid of images in columns similar to Pinterest that I would like to filter. The images vary in height but all have the same width. The issue arises when a taller image is followed by a shorter one, causing the short image to float right ...

javascriptjqueryhtmlcss

Increasing values are applied to the text field when it is clicked or focused on

I have a grid with 18 rows of text fields, each requiring a unique ID. The bottom row may need ID 1 while the top row could need ID 15, depending on user choices. It doesn't have to be aesthetically pleasing, function is what matters. I plan to use th ...

javascriptjquery

"Troubleshooting issue: jQuery AJAX encountering problems with parsing JSON

I recently came across a Uncaught SyntaxError: Unexpected end of input error in my code. var dataURL = "LineChartController?tp=" + tpAtt + "&dept=" + dept + "&date=" + dateMY; alert(dataURL); var JSONdata = jQuery.aja ...

javascriptajaxjquery

How can I modify the background color of the datePicker?

I have a couple of inquiries about customizing the DatePicker: Is there a way to modify the background color of the datePicker using CSS? For instance, I would like to change the current green color to blue. Link to datepicker image (Just to note, JS ca ...

css

Incorporating the FLEX property into my code has been a challenge as it is not functioning properly on iOS 7 and 8 devices. Does anyone have any tips or suggestions on how to

While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...

htmlcssreactjsbootstrap-4flexbox

Efficiently Embedding Images into Canvas Elements

I am struggling with loading individual photos from an array into "canvas" tags. In my function, I generate multiple sets of "div" tags with a "canvas" tag inside them, but I'm facing difficulties in inserting images from an array into these "canvas" ...

javascripthtmlcanvasfor-loop

Discover the potential of JavaScript's match object and unleash its power through

In the given data source, there is a key called 'isEdit' which has a boolean value. The column value in the data source matches the keys in the tempValues. After comparison, we check if the value of 'isEdit' from the data source is true ...

javascripttypescript

Issue with border in Bootstrap Grid Navigation Bar

I've experimented with margins, padding, and border options extensively, but I still can't get rid of the white space at the end of my navbar. Can anyone provide a simple solution, please? See the attached image for a clear visual of the issue. T ...

htmlcsstwitter-bootstrapbootstrap-4

What is the most effective way to send an email in PHP with a table format

<?php $result = mysqli_query($con, "SELECT * FROM cse"); $mail_data = ""; while ($row = mysqli_fetch_array($result)) { $Hallticket_No = $row['Hallticket No']; $Name = $row['Name']; $Email_ID = $row[&apos ...

phpjavascriptjqueryhtmlmysql

Why isn't the CSS outline property functioning properly within the handlebars?

I am working on a login form within a Handlebars page and I am trying to figure out how to set the default outline property to none for that particular element. Does anyone know how to do this? Snippet of code from the Handlebars file <input type=" ...

csshandlebars.js

The controller in ng-controller returns an undefined error when loaded using RequireJs

I have encountered an issue while loading the Angular application using requirejs. The ng-controller written in main.html loads directly but ends up being undefined. app.js define(['sfongApp', 'ng-grid', 'angular-bootstrap'] ...

javascriptjqueryangularjsrequirejs

Launch a nearby hyperlink in a separate tab

I am currently facing an issue where all the URLs in a Text get linked as Hyperlinks. However, when a user types www., the browser interprets it as a local URL and associates the link with the application's URL. Does anyone know how to open a local U ...

javascriptjqueryhtml

The secret to achieving perfectly even spacing along the vertical axis

I'm working on a card design that contains a div with 3 elements - 2 headers and a paragraph. I need to ensure there is consistent spacing between each element and the top/bottom of the card. Currently, there seems to be too much margin after the last ...

htmlcss

Is it Possible to Insert Function from a For... in Loop?

Question: How is a function being attached to a variable's memory space without being explicitly assigned? Situation: I have developed a script to eliminate duplicate objects by comparing the values of object keys. However, after initializing the che ...

javascriptnode.jsfunctionloops

Interested in integrating server side JavaScript with your Android application?

Running a simple web page on a Raspberry Pi to toggle the board's LED with the click of a button. The button triggers a JavaScript function that controls the LED. Now, I want to be able to call this script from a button in an Android application... B ...

javascriptandroidjquery

The Highchart Angular directive is failing to update when receiving new data from a dynamic (ajax) data table

My AngularJs application fetches data from an API and populates a table with it. I then use Highcharts to create a chart based on the table data. Everything works fine when I use static data in the table, but it doesn't update properly when I try to c ...

javascriptajaxangularjshighcharts

Combining JSON objects in Node.js

I am extracting data from my database and converting it to JSON format. However, I now want to merge all the JSON data into a single JSON object. I have attempted various methods, but due to my limited knowledge of JavaScript syntax, I have not been able ...

javascriptjsonnode.js

Guide to updating information inside of script tags in html using javascript

Within my HTML, there is a script tag that looks like this: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "VideoObject", "name": "Title", "description": "Video descrip ...

javascripthtmlangularjsmean-stackmean