Ways to design the Bootstrap accordion card that is currently open or expanded!

I'm currently working with a bootstrap 4 accordion and I would like to customize the border of only the .card elements that are in the "show collapse" state.

var active = document.querySelector(".collapse.show");
active.parentNode.style.border = "1px solid #ea8523";
(CSS code here)
(Bootstrap HTML structure here)

My goal now is to have an orange border on the active or expanding .card element, while the others will have a dashed border. I understand that this can be achieved with JavaScript, but my knowledge in that area is limited. Any assistance would be greatly appreciated.

javascripthtmljquerycssbootstrap-4

Answer №1

The border of each card will change when the show class is added. We use JavaScript to select each card and add a click event listener.

CSS:

.card.show {
  border: 1px solid blue !important;
}

JavaScript:

let cards = [...document.querySelectorAll(".card")];
cards.forEach(card => {
  card.addEventListener("click", function() {
    cards.forEach(c => c.classList.remove("show"));
    this.classList.add("show");
  });
});

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

Clicking a button in jQuery will automatically scroll to the far left

I am facing a challenge with my webpage where inline block divs are being appended each time a link is clicked, causing the total width to eventually go off the page (which is intentional). I would like to implement an animated scroll feature that automati ...

jqueryhtml

JavaScript Regular Expression that identifies commas enclosed within quotation marks

I am attempting to parse a text-based log file in the following format: type: 'click', category: 'REFRESH_DOOR', desc: 'clicked refresh from door 0124', site: 'mysite', pathname: '/load_areas/all/doors&apos ...

javascriptjsonnode.jsregex

Use flexbox to manage the width of containers and control the wrapping of elements

Hello, I am a newcomer to utilizing flexbox in CSS. I have these "boxes" that need to maintain their width and wrap when the screen size is small. On a large screen: https://i.sstatic.net/dXnGC.png On a small screen: https://i.sstatic.net/8rZso.pn ...

cssflexbox

Creating interactive form fields using React

How can I update nested fields in react forms? First, create a new item using handleAddShareholder. Next, delete an existing item with handleRemoveShareholder. To change details of an item, use handleShareholderNameChange. You can then add a new array ...

javascriptreactjs

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

We have implemented a jQuery grid where the last column contains a link. When this link is clicked, a new panel should appear providing additional information. To achieve this, we utilized a formatter that generates a hidden div along with the link. Howev ...

javascriptjqueryhtmlcssjqgrid

Error: The variable "context" has not been defined

I am currently facing an issue while trying to develop a sendNotification function using node.js and Firebase function. I am encountering a problem where I am not receiving any notifications from the sender, and upon checking the Firebase function logs, I ...

javascriptnode.jsfirebasefirebase-realtime-databasegoogle-cloud-functions

Prevent any http requests until an observable completes its task

I'm currently developing an Angular interceptor where, before sending any non-GET requests, I need to make a GET request to obtain a specific header from the server and then set that header on all subsequent requests. Is there a method for achieving t ...

javascriptangularpromiserxjs

The performance of Javascript code comes to a screeching halt

I recently developed a JavaScript script to convert over 300 images to base-64 format. <script type="text/javascript"> var parts, images; var canvas=document.getElementById("myCanvas"); var container = $("#container ul"); ...

javascriptjquery

The functionality of angular ng-show/ng-hide is not functioning properly when used in conjunction with ng-bind-html

I am having an issue with setting ng-show or ng-hide for my elements in an HTML string and passing it to the view using ng-bind-html. Unfortunately, the ng-show/ng-hide functionality is not working as expected and my element is always visible. Below is my ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Utilizing MEAN.js for uploading images

Following a tutorial on the MEAN stack, I am looking to implement an image upload feature using MongoDB on a server. Resources: Angular directive for file uploads create-spot.client.view.html <div data-ng-controller="SpotsCreateController"> &l ...

javascriptangularjsnode.jsmongodbng-file-upload

Angular Singleton Service for Asynchronous UI-Router Operations

I've been using UI-Router for my Angular application. The data I fetch through an asynchronous $http call helps in creating a connection object, which I want to make available as a singleton. My aim is to prevent potential timing issues that may arise ...

javascriptangularjsasynchronousangular-ui-router

Validation with Joi: When the object aligns with the schema, validate it against multiple items

Currently, I have an array of objects that need to be validated against specific schemas. If any object matches with a given schema, I want the validation process to only check against that particular schema and move on to the next item in the array. I at ...

javascriptnode.jsvalidationjoi

Error encountered: The property indexOf cannot be read. Possible issue with .load() function in jQuery causing this error

https://i.sstatic.net/R7zUX.png As I navigate through the page and interact with different elements, I encounter an error message. The Obj function, which is responsible for setting a property value in an object from a handlebars template input and loadi ...

javascriptjqueryhtml

Creating three cards with identical height using Bootstrap and flexbox techniques

I am struggling to align 3 blocks in height and keep the yellow block fixed at the bottom of its parent container. After trying different solutions, this is the outcome I have: https://i.sstatic.net/QOHsV.png The yellow block is not positioned correctly ...

cssbootstrap-4flexbox

Encountering the `undefined is not a function` error message when trying to map the response data from an API call within a

While working with an API, I am saving the result in a state called shift and here is the outcome: [ { "id": 123, "status": "created", "expected": { "end_time": " ...

javascriptreactjstypescriptreact-nativemapping

Save user input data into an Excel file using PHPExcel

Could someone assist me with storing values from my form inputs to Excel using PHPExcel? I have successfully stored data from my table to Excel, but now I want to store the values from my inputs. Can anyone help me, please? Example of the form inputs: ent ...

javascriptphphtmlmysqlphpexcel

I am experiencing an issue where the button I place inside a material-ui table is unresponsive to clicks

Here is the structure of my table: <TableContainer component={Paper} style={{height: "40vh", width: "90vh"}}> <Table size="small" sx={{ minWidth: 200 }}> <TableHea ...

javascriptreactjsmaterial-uijsx

CSS Transition not activating upon initial mouseover

My attempt at a simple transition is not working properly on Safari. I am trying to change background images from A to B on hover, but the transition is not smooth when I first hover over the element. Instead of gradually fading in/out, it instantly change ...

htmlcsssafaritransition

What are some methods for postponing a SurveyMonkey survey prompt?

Seeking feedback on a new site launch in beta mode (full launch scheduled for March 28). We want to give users time to explore the site before showing a pop-up after 10 seconds. As I am new to coding JavaScript, any assistance would be greatly appreciated. ...

javascript

Next.js App experiences a 404 Error when attempting to access the Auth0 Endpoint "api/auth/me"

Following a tutorial, I integrated my Next.js App with Auth0 successfully. However, after logging in and out, I encountered an issue where the user object is not returned when trying to display user information on the page post-login. Both the Profile.js p ...

javascripttypescriptnext.jsauth0auth0-connection