Currently, I am facing an issue with two action buttons located in the header of an accordion. Here is the setup:
https://i.sstatic.net/HU2Kp.png
Whenever I click on one of these buttons, it toggles the accordion's state. I have attempted to use e.preventDefault() and e.stopImmediatePropagation() but unfortunately, they did not work.
For reference, here is the link to the jsfiddle:
https://jsfiddle.net/bxzhqsad/3/
Please note that my project is built using Bootstrap 5.
Here's a clever solution:
The accordion button is equipped with a key data attribute
data-bs-collapse="collapse"
Without this key, the accordion simply won't function. So, we can take advantage of this by using it to disable the accordion when hovering over our own button.
In essence, we can:
on mouseenter event of your button, set the accordion button's data-bs-collapse to an empty string ""
on mouseleave event of your button, revert the accordion button's data-bs-collapse back to "collapse"
Assuming your button is a direct child of the collapse button/div, here's a snippet of code:
yourButton.addEventListener('mouseenter', (e) => {
let accordionButton = yourButton.parentElement;
accordionButton.setAttribute('data-bs-toggle', '');
});
yourButton.addEventListener('mouseleave', (e) => {
let accordionButton = yourButton.parentElement;
accordionButton.setAttribute('data-bs-toggle', 'collapse');
});
yourButton.addEventListener('click', (e) => {
// carry out your desired actions...
});
Trust this comes in handy!
If you nest elements inside the .accordion-button, you may not be able to capture the inner elements' events. To achieve the same functionality, a suggested approach is to separate the inner buttons from the .accordion-button and then use absolute positioning to visually mimic the original appearance:
<h2 class="accordion-header" id="flush-heading-1">
<div class="d-flex">
<button type="button" class="accordion-button collapsed text-start" data-bs-toggle="collapse" data-bs-target="#item_1" aria-expanded="true" aria-controls="#item_1">
<h5 class="content_title fw-bold w-100 text-left">Title 1</h5>
</button>
<div class="d-flex align-items-start position-fixed" style="right:100px; z-index:1000;">
<span class="fa fa-pencil-alt cercle-icons edit-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
<span class="far fa-trash-alt cercle-icons delete-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
</div>
</div>
</h2>
For a visual representation, please check out the modified fiddle
I have included a search input in my code like this: <input type="search" placeholder="search" /> Webkit has different styles for an input field with the type 'search'. One of these styles is displaying a cancel ('x') button on ...
I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...
I've been struggling to properly align my menu on the website. As it stands, when a user arrives and is not logged in, they see the header below: https://i.stack.imgur.com/mTKse.png Once the user logs in, the login/register text is replaced by a dro ...
How can I retrieve only the selected value from the user, when there are multiple select options with the same class name due to dynamic data coming from a database? The goal is to submit the data using Ajax and have the user select one option at a time. ...
I am developing a gantt chart feature that allows users to select a start date and an end date. The gantt chart should display the week numbers in accordance with the ISO standard. However, I have encountered two situations where either the start week numb ...
Looking to leverage Selenium in Python 3.9 for button clicking automation. Link to the website https://i.stack.imgur.com/KWsKG.png The goal is to click on "Effective Date", then select "July 2021", and finally click "OK". Initially, the first two steps ...
I am using Bootstrap 4 along with the Bootstrap colorpicker to implement a colorpicker within a popup that includes an input field for setting the color code. However, I am facing an issue where the input field (#color-value) seems uneditable when the popo ...
I'm currently facing a challenge in finding a solution to what appears to be a simple problem. Within a template, I am using a v-for loop to generate some content. In this content, I need to execute a function to check if the contentID matches an ID ...
I am working on an ajax call that returns a table. In the success method, I am using $("#tableID").dataTable();. Although it shows paging and the number of rows in the dropdown, it is displaying all rows instead of only the number of rows selected in the d ...
Why is AngularJS giving an error when brackets are used inside ng-template content? I am trying to create an input field that should accept an array, but I keep getting this error message: "Error: Syntax Error: Token ']' not a primary expression ...
I've implemented a function that scans a file for a specific term and then outputs the entire line as a JSON object. Strangely, when I include an else statement in the logic, an error occurs: _http_outgoing.js:335 throw new Error('Can\& ...
One solution to dynamically fix the height issue of Google Trend charts is by modifying the code output. An example of this can be seen in the code snippet below: <iframe width="600" height="320" src="http://www.google.com/trends/fetchComponent?hl=en-U ...
When I press the player 1 button, it changes the score for both players. I also attempted to target p2display with querySelector("#p2Display"), but it seems to be recognized as a nodeList rather than an element. var p1button = document.querySelector("# ...
My goal is to update the quantity and price in two tables: Invoice and Order_Table. The updates should only apply to a specific OrderID. Here's my attempt: $UpdateQuant = "UPDATE Order_Table SET Quantity = '$NewQuant' WHERE OrderID = ' ...
I have been attempting to add a special effect to my menu. Specifically, I have been trying to include a 3px border at the top of each "li" element in my menu that only appears when hovered over. Unfortunately, my attempts using :after pseudo-selector hav ...
Within the realm of styling, there exists an element adorned with the .bg class. Its aesthetic instructions are described as follows: .bg { width:100%; } .bg:before { position: absolute; content: ''; background: rgba(0,0,0,0.5) ...
My bootstrap breadcrumb element is displaying fine on large monitors, but on mobile devices the page header covers it. How can I make the header move to a new row for smaller screens? <div class="card"> <div class="card-body ...
I have created an HTML input for users to enter a zip code, and I have a JavaScript variable set to capture that input. When I console.log this variable, I can see that it is successfully set as a string. However, when I try to make an AJAX call with the ...
Hey there! I'm looking to create 3 pie charts side by side, each based on a different dataset retrieved through separate ajax calls. The first chart will be generated from the results of one call, the second from another, and the third from yet anothe ...
I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as foll ...