The snippet showcases a basic table with one row containing a button group. Upon clicking the 'main' button (the reset button), the following table row will appear. This behavior is intended only when clicking on the table row itself, not the button within it.
Additionally, there seems to be a delay in reverting the collapse effect. What could be causing this?
Addressing both the original question and the comment.
When the button is clicked, the event bubbles up and triggers on the row element, allowing the click handler of the row (which toggles the section) to also function.
To prevent this, you can stop the click event from bubbling up by using event.stopPropagation() in the reset button's click handler.
The slow response of decollapse is because Bootstrap applies the default class .collapsing during the toggle process, enabling animation. By default, it animates the height of the element, which may not work if the table row's height cannot be less than the content height, causing a delay in the intended animation.
You can disable the animation by overriding the default transition with none, as shown below, or consider using elements other than tables, such as div.
Here is the modified version of your code based on my suggestions:
.collapsing {
-webkit-transition: none !important;
transition: none !important;
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
<table class="table m-0">
<thead class="thead-light">
<tr>
<th>
<span class="d-inline-block align-middle">table head</span>
<button type="button" class="btn btn-secondary btn-sm float-right">button text</button>
</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
<td>
table content
<div class="btn-group float-right align-top" onclick=";">
<button type="button" class="btn btn-warning" onclick="alert('reset!');event.stopPropagation();">reset</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu bg-danger">
<a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a>
</div>
</div>
</td>
</tr>
<tr class="collapse" id="collapse2">
<td>
<div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1">
<div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div>
</div>
<div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2">
<div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div>
</div>
</td>
</tr>
</tbody>
</table>
<script>
$(window).on('load', function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>
</body>
</html>Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function: <MapAnnotation title='Annotation' latitude={ 12.3 ...
I'm having trouble with a time input box. <input type="time" min="09:00" max="18:00" \> Even though I have set the min and max attributes to values of 09:00 and 18:00 respectively, it doesn't seem to be working properly. I want to ...
I am using countdown.js to create a custom countdown timer. My goal is to replicate the countdown timer seen on the homepage, but with the ability to change the target date (which I have already accomplished). Here is an example of what I currently have f ...
I have decided to incorporate Bootstrap into my project. My attempt at installation involved using "bootstrap": "^4.0.0-alpha.5" I followed a tutorial found at https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass- ...
When I submit the form, I want to perform some validations. However, it seems like the validation function is not working as expected. The alert part does not appear when triggered. Here is the code snippet: function validation(){ alert("somethi ...
Hey there, I'm in need of some assistance. I have a Codepen page where I am working on displaying 4 random shapes (Square, Triangle, Circle, and Cross) one at a time, with the computer speaking the name of each shape when clicked. I want to pull these ...
Having issues with my Bootstrap layout where I have two divs: (A) set as col-lg-6 and (B) set as col-lg-6 on a large device. This currently displays as: (A)(B) I am trying to rearrange the order of these divs on a mobile or small device using col-sm-12 ...
Whenever a user selects a radio button, I want to display an alert box. I have already written the jQuery code to achieve this. Here is my implementation: <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></ ...
Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...
My goal is to display the up/down arrows alongside an input element with type="number" in Chrome on Android. I've adjusted the CSS to set opacity=1, but unfortunately, they are not appearing. On desktop, however, they show up without any iss ...
I have a project where the user needs to input a word to search for in files along with the folder location. However, I am struggling to write code that allows the user to input the location using single backslashes instead of double backslashes. const fol ...
My login page involves user authentication through the firebase and sending the request to a servlet. When I click the submit button with correct credentials, the firebase authentication works, the servlet is called but an error is displayed in the browser ...
Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...
My current setup involves loading Bootstrap 4.6 js and css from Bootstrap CDNs in WordPress using wp_enqueue_script and wp_enqueue_style in the functions.php file wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/<a href="/ ...
Hey there, I'm new to scripting and I've run into a problem. I'm trying to figure out how to load a page in a parent div when clicking buttons in a child div. Specifically, I want to load a specific page in the parent div. Just to clarify, t ...
I'm trying to make sure that both the 'select' and 'button' elements have the same height. Check out my JS Fiddle here Here's the HTML code: <select><option>...</option></select><button>Button& ...
I recently embarked on my journey to learn web development by enrolling in a course on Udemy. Currently, I am diving into CSS3/HTML5 and have started a small project involving CSS3 - creating a web page that represents the Universe. My goal is to incorpora ...
I am facing an issue where, while trying to search for a specific word to highlight it, the "show more" button closes and only displays the text prior to clicking the button. How can I ensure that the expanded content remains open while searching for a wor ...
Imagine you have HTML code that includes an image with a placeholder: <img class="lazy-load" src="http://via.placeholder.com/150/?text=placeholder" data-src="http://via.placeholder.com/150/?text=real%20image"/> At some stage, you want to implem ...
The issue I encountered cannot be replicated, but I attempted to address it. Within a Material UI element, there is a child element that I inserted - an X icon located in the corner. The parent element is the surrounding box. There are two main problems: ...