Create a new division directly underneath the bootstrap column

Imagine having a bootstrap table like this:

https://i.sstatic.net/kXHiP.jpg

Now, if you want to click on a column and open a div with more details below it, is it achievable with CSS or JavaScript?

https://i.sstatic.net/HIfkK.jpg

I tried using the Metro Dropdown, but facing width constraints with col-3. Even after setting the width in CSS, couldn't achieve the desired look. How can I make it look like the attached image?

Is there a specific name for this type of behavior? It appears to be a "Dropdown" that shifts the components below slightly. Any tips on how to implement this?

javascripthtmlcssbootstrap-4dropdown

Answer №1

It seems like there are a few details missing from your question. Here is an attempt at providing a solution. If this doesn't fit your needs, please provide more information in your question and feel free to leave a comment. 

$(document).ready(function() {
    let counter = 1;

    $('.container-fluid').fadeIn();

    $('.col-12').click(function() {

        // slide up existing detail row with animation, then remove it
        $(this).closest('.row').find('.detail').slideUp(400, function() {
            $(this).remove();
        });

        // create and append a new row with animation
        let detailEl = $('<div class="col-12 detail hidden">' + counter + '</div>');
        $(this).closest('.row').append(detailEl)
        detailEl.slideDown();

        counter++;
    });
});
.row {
    border-bottom: 2px solid #ddd;
}

.col-12,
.detail {
    height: 30px;
    background: pink;
}

.detail {
    background: lightgreen;
    transition: background 1s;
}

.detail+.detail {
    background: darkgreen;
}

.hidden {
    display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid hidden">
    <div class="row">
        <div class="col-12"></div>
    </div>

    <div class="row">
        <div class="col-12"></div>
    </div>
</div>

Take a look at the Fiddle demo here

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

Transform the blob, which includes an image, into just an image and insert it into the <img> tag

When adding a record to a MySQL database with XAMPP and the "mysql2" package (^3.6.2), I encountered an issue. export const addPage = async (req,res) => { try { if(req.session.user !== undefined) { ...

javascriptmysqlnode.jsexpressblob

What are some creative ways to design drop-down menus within an email?

The snippet of code I am currently using lacks the ability to format text, and it does not allow content below dropdown items to shift down properly in an email. <select> <option value="first">First-time users of the Vanguard Events app:&l ...

htmlcss

The `margin:auto;` property does not function properly with inline-block elements

I recently adjusted my "container" div by changing it to an inline-block. Previously, I had applied margin:auto; to center it, which worked well with a specified width. Original Code (functional) #container { border: 1px solid black; height: 2 ...

htmlcssmargin

Guide on dynamically loading email contacts options in selectize.js

I have been working with selectize.js to create an email contacts feature. However, I am facing an issue where the mail list retrieved from the database is displaying as undefined in selectize. Strangely, when I manually enter the return value, everything ...

javascriptjqueryasp.net-mvcselectize.js

Identifying the color category based on the color code in the props and displaying JSX output

I am in need of a solution to display colors in a table cell. The color codes are stored in mongodb along with their descriptions. I am looking for a library that can determine whether the color code provided is in RGB or hex format, and then render it acc ...

javascriptreactjsmongodb

The error message "ReferenceError: express is not defined" indicates that Node.js is

Recently, I started using Nodejs to develop web servers, utilizing the express module. To install it, I used the command: "sudo npm install -g express". However, upon running the program, an error occurred: "ReferenceError: express is not defined ...

javascriptnode.jsexpressnpmserver

Refresh the page with cleared cache using window.location.reload

Is there a way to reload a page using JavaScript and still clear the cache, ensuring that the refreshed page shows the latest content from the server? It seems that other browsers are not displaying the most up-to-date versions of the content. Anyone have ...

javascriptinternet-explorer

Modify text by adjusting text color based on the contrast with the background color using knockout databinding

I am working with a table that contains data from my database: Here is the ViewModel structure: function alertViewModel(i) { var self = this; self.Id = ko.observable(i.Id); self.AlertType = ko.observable(i.AlertType); self.Category = ko.observab ...

cssknockout.js

Just released a new npm package called vue-izitheme. It's fully functional from the command line, but for some reason it's not showing up in search results. Any suggestions on how to fix

I released my project, vue-izitheme, two days ago but I can't seem to find it when searching. It is functioning correctly from the command line and has already been downloaded 44 times. Do you have any thoughts on what could be causing this issue? ...

javascriptvue.jsnpmpluginsthemes

Revise the calculation output when a specific input is missing

As I work on creating a basic web page for computing values based on selected options, I've encountered an issue with the calculation process. The result does not immediately appear; instead, I have to input a value like 0 and then delete it in order ...

javascriptjquerycalculation

Returning to the previous state in AngularJS when unchecking a checkbox

I'm a beginner when it comes to using angularjs HTML File: <div class='col-md-2 searchdisplay-col1' ng-controller="amenitiesController" style="margin-top:20px"> <h4>Amenities</h4> <label ng-repeat="facilityName ...

javascriptjqueryajaxangularjscheckbox

Check if the data-indices of several div elements are in sequential order using a jQuery function

Is there a way to implement a function in jQuery-ui that checks the order of div elements with data-index when a submit button is pressed? I have set up a sortable feature using jQuery-ui, allowing users to rearrange the order of the divs. Here is an exam ...

javascriptjqueryhtmlcss

Is it possible for me to utilize jquery and AJAX to invoke a cgi-bin script, and then incorporate a message event to manage Server Sent Event?

I have a cgi-bin program that runs for a long time (3-15 minutes) and I am looking to invoke it using AJAX. While the program is running, I want to receive Server Sent Event data from it and display it on my web page. It's like having a progress monit ...

javascriptjqueryajaxserver-sent-events

The event listener for 'load' is not functioning properly within the React (Gatsby) environment

I'm having trouble with a sticky scroll parallax effect when the page initially loads at a position other than the top. I'm utilizing the react-scroll-parallax library (https://www.npmjs.com/package/react-scroll-parallax). To address this issue, ...

javascriptreactjsgatsbyparallax

Using Node.js and Express to import a simple JavaScript file as a router

Can anyone help me understand how to import the user.json json file into my user.js? I want the json file to be displayed when typing /user but I'm struggling with the new version of Node. index.js import express from 'express'; import body ...

javascriptnode.jsexpressrouter

Switch up the color of the following-mouse-div in real-time to perfectly complement the color that lies underneath it

I am trying to create a div that changes color based on the complementary color of whatever is underneath the mouse pointer. I want it to follow the mouse and dynamically adjust its color. This functionality is similar to what Gpick does: https://www.you ...

javascriptjquerycss

The function JSON.parse appears to be malfunctioning within the code, yet it operates smoothly when executed in

I am facing an issue with my Angular $http post service that communicates with a WCF service. The success handler in the http post is as follows: .success(function (data) { var response = JSON.parse(data); var tsValid = response.Outcome; defer ...

javascriptjson

Issue arises when there are several inline <script> tags containing parameters which result in filtered JSON output

As a newcomer to JavaScript, I am faced with the challenge of creating a centralized glossary within a confined educational environment (LMS) that lacks a database or any other facilitating elements. My objective is to develop a script hosted on our applic ...

javascriptjsonajax

Regain focus after selecting a date with Bootstrap datepicker

When initializing a bootstrap datepicker from eternicode with the parameter autoclose: true, there are two undesired behaviors that occur: After closing the picker, tabbing into the next field causes you to start at the beginning of the document again, w ...

javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker

Using Sass to create dynamic variables with other variables

Is it possible to reference variables based on the value of another variable? This functionality exists in languages like PHP. For example, in Sass: I have variables $green, $blue, and $yellow being included from a partial. I want to dynamically set the ...

csssasscompass-sass