Is there a way to determine which elements have been hidden or shown using Bootstrap 4 collapse events?

Looking to enhance the functionality of a Bootstrap 4 accordion, I am exploring the possibility of utilizing their events (https://getbootstrap.com/docs/4.0/components/collapse/#events). In one of their examples,

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

It appears that the callback function does not receive any information.

I am interested in knowing which specific element(s) were either shown or hidden. Could it be true that this is not achievable with the .bs.collapse events?

javascriptbootstrap-4

Answer №2

Although this may be coming in late, there might still be someone who can benefit from this information. If you are dealing with any of the 4 events, a similar approach can be taken. In this example, I am interested in retrieving the id of the element that is being displayed:

$('#accordionProperty').on('shown.bs.collapse', function (e) {
    CallMyFunctionWithId(e.target.id);
})

Similarly, for hidden elements:

$('#accordionProperty').on('hidden.bs.collapse', function (e) {
    CallMyFunctionWithId(e.target.id);
})

I hope this explanation proves useful to you.

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

What is the process for including additional properties with the JS spread operator?

Is there a more efficient way to achieve this task other than adding patientId and insuranceId to the spread operator in the code below? main.js const Response = await getData(re); const patientId = "AW364747"; const insuranceId = "0000786622"; logger( ...

javascriptarraysecmascript-6

What could be causing Next.js to throw an error upon completion of the MSAL OAuth process?

I encountered an error while building a website using next.js. The site is set up for production, and after the authentication process with MSAL for Azure AD integration, I am facing the below error during the OAuth loop. As a beginner in next.js coming fr ...

javascriptnode.jsreactjsnext.jsmsal.js

Unable to call upon JavaScript code from an external file

Just starting out with Spring and JavaScript! I've put together a JSP file https://i.sstatic.net/XemJ5.png In my first.js, you'll find the following method: function firstmethod() { window.alert("Enter a New Number"); return true; } H ...

javascripthtmljsp

Issue with Vue JS function not providing the desired array output

I declared a property in my data model like this: someArray: [] A function returns an array: getMyArray: function (someId) { var result = [7, 8, 9, 10]; return result; } I'm assigning the result of the function to m ...

javascriptvue.js

Sorting objects in Angular using ng-options

I am working with an object that has the following structure: { 3019: 'Javascript', 3046: 'Css' } After that, I display this object in a select element like this: <select ng-model="langChoosed" ng-options="key as val ...

javascriptangularjsng-options

The jstree does not seem to be generating the tree structure as expected based on

I am utilizing the jstree plugin to construct a hierarchical tree view of locations, rooms, and assets for a company within a PHP application that I am developing. The main intention behind this tree is to enable users to select an asset while going throu ...

javascriptjqueryjsonjstree

Issue with custom Javascript not executing in Internet Explorer versions 9 and 10

Initially, this script is found in the document's head section. <script> document.addEventListener("DOMContentLoaded", function () { var e, t = document.querySelectorAll("div.bounceInDown"); for (var n = 0, r = t.length; n & ...

javascripthtmlinternet-explorercss

Creating transclusion templates in a compiled format

<div overlay config="overlayConfig"> <div class="dismiss-buttons"> <button class="btn btn-default" ng-click="subscriptions()">Save</button> </div> </div> app.directive("Overlay", ["$timeout", "$compile ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-transclude

When there is content behind the list, the Autosuggest Ajax does not function properly

I have successfully implemented an ajax/jquery dropdown/list feature that retrieves results from the database based on user input. For each result in the database, it generates a <li> element and converts it into a clickable link to redirect users t ...

javascriptphpjquerymysqlajax

What is the process for extracting components from a JSON file using an observable in Angular?

Take a look at this snippet of code: response: any; fetchData(url: any) { this.response = this.http.get(url); } ngOnInit(): void { fetchData("url.com/data.json"); console.log(this.response) } When I check the console, I see Obser ...

javascriptjsonangularrxjsobservable

Bootstrap enables a 4 column layout that automatically adjusts to different

I am looking to create a row with 4 columns that will adjust based on the user's device. When viewed on a tablet, the row should display 2 columns side by side and the other 2 columns below them. On mobile devices, I want the row to show as 1 column w ...

twitter-bootstrapresponsive-designbootstrap-4twitter-bootstrap-4

Transfer Parameters from the Screen to the Header Component in React Navigation

I am facing an issue where I am unable to pass a function as parameter to the header component in react-navigation v5. In the code snippet provided below in filtersscreen.js, my intention is to pass savefilters to headerRight which is located in navigatio ...

javascriptreactjsreact-nativereact-navigationreact-native-navigation

JustGage error: Unable to locate element with ID 0 in AngularJS

I developed a custom directive for the JustGage plugin, here is how it looks: function justGage() { return { restrict: 'E', replace: true, scope: { universalId: '@', ...

javascriptangularjsjustgage

Is it feasible to manage the HTML content surrounding my information within the Google Maps InfoWindow in ReactJS?

In my Google Maps application, I have an InfoWindow that displays some of my HTML content created in React. return ( <div className="map-tooltip-wrapper"> <div className="map-tooltip-image><img src={image || '& ...

javascripthtmlcssreactjsgoogle-maps

Is it possible to generate a PagedListPager without the need to invoke a function?

Managing a list with ajax calls has been fairly smooth on the initial load. The search button triggers an ajax call that loads the first page of results without issues. However, an obstacle arises when trying to implement PagedListPager which ends up reset ...

javascriptc#ajaxmodel-view-controller

Choosing attribute values from a list with jQuery

Can jQuery select multiple items at once like this: // Example $('input[name=val1 or val2 or val3...]') Currently, I am attempting to achieve the following: $("input[name='A'] input[name='B'] input[name='C']").blu ...

javascriptjquery

Resizing Zurb Foundation Equalizer elements dynamically after an AJAX call

I encountered an issue with Foundation equalizer. I am attempting to dynamically adjust div heights using equalizer after changing content with ajax. Despite searching through Foundation documentation and Stack Overflow, I was unable to find a solution. I ...

javascriptjqueryajaxzurb-foundationequalizer

Error encountered during react parsing: An unexpected '#' error was encountered when using the react-router-sitemap npm package

I'm currently working on building a sitemap using the react-router-sitemap npm package. After installing all the necessary dependencies related to react-router-sitemap, I created a file called sitemap-generator.js and added the following code. router ...

javascriptreactjsnpm

I attempt to demonstrate to my users, but unfortunately, it doesn't seem to be successful

My console.log is showing "undefined" for my users even though I can see them in my State. This issue started happening after implementing Redux - previously, it was working fine without Redux. Take a look at the code snippet from UserManagement.js: funct ...

javascriptreactjs

Error: The reduce function cannot be applied to $scope.array as it is not a

I am currently facing an issue with a section of my code that involves loading attributes related to a page using drop-down lists. These attributes, namely instruments, style, and scoring, are fetched through a service call. For instance, when retrieving ...

javascriptangularjsarraysreduce