Expanding and collapsing multiple rows within a Bootstrap grid

Seeking advice on Bootstrap and its implementation of columns and rows. Currently facing a cascading effect where I have managers, followed by employees, and then employee family members.

The challenge lies in my limited understanding of how Bootstrap utilizes columns/rows.

Upon running my code, I am achieving this outcome at the bottom: here

However, I aspire to attain this desired result instead: result

Realizing that my current code falls short of reaching this goal... Any insights or suggestions would be greatly appreciated!

<div class="container">
        <div class="row">
            @{i++;}
            <div class="col-md-4">
                <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#@i">Manager Name</button>
                <div id="@i" class="collapse">
                    <div class="row">
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-10">
                            <h5>Employees</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-8">
                            j++;
                                <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#@j">Employee Name</button>
                                <br />
                                <div id="@j" class="collapse">

                                    <div class="row">
                                        <div class="col-md-4">
                                        </div>
                                        <div class="col-md-8">
                                            <h5>Employee Fam Members</h5>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                        </div>
                                        <div class="col-md-8">
                                             @Html.ActionLink(Employee Fam Member Name, blah, blah)
                                        </div>
                                    </div>
                                    <br />
                                </div>
                                <br />
                        </div>
                        <div class="col-md-2">

                            <br />
                            <br />

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-1">
                Edit Button    
            </div>

            <div class="col-md-7">
                Delete Button 
            </div>

        </div>
        <br />
    

Answer №1

If you want to ensure that your rows expand fully instead of being limited by columns, then create multiple rows on the same level rather than nesting them inside columns. You can use container-fluid to make them stretch across the full width if needed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#i">Manager Name</button>
        </div>
        <div class="col-md-1">
            Edit Button    
        </div>
        <div class="col-md-7">
            Delete Button 
        </div>
    </div>
    <div id="i" class="collapse">
       <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-10">
                <h5>Employees</h5>
            </div>
       </div>
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-8">
              <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#j">Employee Name</button>
            </div>
       </div>   
    </div>
    <div id="j" class="collapse">
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-8">
                <h5>Employee Fam Members</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-8">
                 @Html.ActionLink(Employee Fam Member Name, blah, blah)
            </div>
        </div>                                  
    </div>
</div>

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 best way to set unique heights for various ion-grid components?

Situation: I am facing an issue with my Ionic/Angular app. The screen layout, as shown in the image provided and on Stackblitz, includes two ion-grids with different background colors - green and red. Goal: My goal is to assign a percentage height to each ...

How can I implement Jquery ajax calls in various JavaScript functions?

I'm encountering an issue with a particular function in my code function readComm(){ $.post("something.php", {read:"read"}, function(data){ retVal = $.trim(data).toString(); console.log(retVal); return retVal; }); } T ...

How to Access a div from another website using jQuery

I have a question. How can I call a div from another website using JavaScript? Here is the page: Now, I want to call the <div id="testa"> in another page. The other page is called Otherpage.html: jQuery(function($){ $(&ap ...

CSS, Assistance in incorporating a sub menu into a drop-down menu

I'm looking to enhance my drop down menu by adding a sub menu. Specifically, I would like to create a sub menu for Item 3 in the HTML below. How can I achieve this? Thank you, Below is my CSS code: .nav_menu { width:100%; background-color:# ...

Change shapes of figure blocks using Internet Explorer (I am using IE11)

Good day! I have implemented this code to create a flip effect on the blocks of my website: .tegels { /*position:relative;*/ width:25.2%; height:37.4%; overflow:hidden; float:left; margin-top:3.5vw; margin-bottom:0px; m ...

Is it possible to maintain child divs in a single line?

Despite trying numerous recommendations (many involving white-space:nowrap and display:inline-block), I have been unsuccessful in keeping these child divs on a single line with horizontal scrolling. This is my code: <div id="list"> < ...

What is the reason behind Chrome's fullscreen mode turning the background black?

I created a webpage with full-screen functionality and made sure to use the correct CSS properties to ensure that my gradient background covers the entire screen perfectly. However, I encountered an issue when clicking the full-screen button in Chrome - th ...

``Do not forget to close the modal window by clicking outside of it or

I am looking for a way to close the modal window either when a user clicks outside of it or presses the escape key on the keyboard. Despite searching through numerous posts on SO regarding this issue, I have been unable to find a solution that works with ...

Techniques and Strategies for showcasing several images in close proximity

I am looking to arrange dummy images in a row next to each other, similar to the example shown here: https://i.sstatic.net/HUUGz.png Since my CSS skills are not very strong, I am seeking guidance on the proper way to achieve this. The images I have are a ...

Methods for passing JavaScript variables to PHP

I have encountered this problem on Stack Overflow before, but I couldn't find a solution that worked for me. I am using Codeigniter and have a form where users can rate a product. What I need to achieve is to insert the user's rating into the dat ...

The $(window).load(function() function is unable to run once the entire document has finished loading

I have not been able to find the solution in the following circumstances: In an HTML document, I successfully load multiple other HTML files. However, within one of these included HTML files, specifically "navmenu.html," I want to execute a script with a ...

CSS - Dynamic triangle separator

I've been working on creating a triangle-shaped CSS divider. Using the code snippet below, I was able to achieve the desired result: border-width: 4vw 75vw 0 23vw; However, this method feels a bit unconventional. Since you can't use percentages ...

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

I am having trouble incorporating bootstrap-icons into my angular project. Despite running the npm i bootstrap-icons command, I am unable to successfully add icons using icon fonts on my webpage. As a temporary solution, I have added the bootstrap icon CD ...

When using IndexedDB with a Javascript To-Do list, the dates for all items appear to be the same after adding a new item to the list

I developed a To-Do List using Javascript, HTML, and IndexedDB to store the items in the database so that they won't be deleted when the browser is refreshed. I also want to include the date for each item, however, whenever I add an item, the date end ...

The vertical-rl writing mode fails to function properly when the website is viewed within the Facebook app

I am facing an issue with a vertical button on my website. It works fine in browsers, but when the webpage is shared on Facebook and opened within the Facebook app, the button's alignment gets distorted. How can I resolve this problem? <div class= ...

execute the function after the animation has finished

Is it possible to trigger a function once an animation is complete using jQuery? Here's the code I'm working with: $('html, body').animate({scrollTop:$("body > .addAccountForm1").offset().top }, 'slow'); I want to execut ...

How about utilizing node.js as a peer for WebRTC?

Are there any available modules for utilizing node.js as a peer in WebRTC? I am interested in using WebRTC in a client/server manner rather than P2P for its ability to send packets unreliably (i.e. avoiding the delay caused by TCP's guarantee of packe ...

What steps do I need to take to extract the date and month from a single datepicker using the code below?

<div class="col-md-3 pull-left" style="padding:9px"> <input type="text" id="datepicker" class="form-control"> </div> The HTML and C ...

jmpress: Scrolling through Absolutely Positioned Element (Slide) with dynamic height

Check out the Live Site I'm currently working on a website using jmpress, but I'm facing difficulties in implementing scrolling functionality for my content. While I can scroll in Chrome by selecting text and dragging down, I want to achieve thi ...

Steps for encoding a CSV export with HTML:

When I retrieve data from a string that is HTML encoded as Quattrode® I end up with Quattrode® after viewing it in Excel 2007. Here is the routine: Response.Clear(); Response.Buffer = true; Response.ContentType = "text/ ...