Display content below each item in the Bootstrap List Group

Currently, I am implementing the tabs using the Bootstrap list group component. When a list group item is clicked, the appropriate tab pane is displayed. By default, it appears in the adjacent column:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>
</body>
</html>
The current display looks like: https://i.sstatic.net/vN19B.png

However, I aim to achieve a layout similar to this: https://i.sstatic.net/beE5p.png

jquerycssbootstrap-4

Answer №1

Consider utilizing the accordion component for your desired functionality and layout: https://getbootstrap.com/docs/4.1/components/collapse/

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Explore the features of the accordion component here.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
... (continued content) ... 
</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

A versatile CSS and JavaScript slider component that is designed to be reused multiple times within a single webpage

Looking to create a CSS/jQuery slider that can be used multiple times on one HTML page. I have a client who wants sliders as category links, but I'm struggling to get it working as a single slider on a page. Can someone review the code and point out ...

javascriptjqueryhtmlcssslider

Pressing the Enter key triggers the addNewRow function using JavaScript

Here is the code snippet I am currently working with: $(document).on('keypress', ".addNewRow", function(e){ var keyCode = e.which ? e.which : e.keyCode; if(keyCode == 9 ) addNewRow(); }); This code adds a new row to a table when the "Ta ...

javascriptjquery

Troubleshooting: Jquery ajax failing to send parameters to Asp.Net Core MVC controller action

I've encountered an issue with the code I'm using to call a controller method and pass parameters. The method is being called, but the values are coming up as null in the controller method. Interestingly, this same code works perfectly fine in a ...

jqueryajax

Animating SVGs in Internet Explorer (IE)

I'm currently working on an animation project using SVG images and JS, but unfortunately, I've run into a roadblock with SVG animations not functioning correctly in Internet Explorer. Do you happen to know of any solutions that could make it work ...

javascriptjqueryhtmlinternet-explorer

jQuery - Discovering the MAC address in a string and potentially styling it

One challenge I'm facing on my website is the ability for users to input data, which often includes a MAC address. To streamline this process, I am looking for a way to automatically identify and reformat any MAC addresses that are entered in a delimi ...

jqueryregexformatting

Can a viewport be designed with a minimum width?

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport"> When viewing a website on a normal desktop, the window width is typically 1000px or more. However, on an iPhone, it's important to ensur ...

iphonecss

Techniques for transferring array values to a function in JavaScript

I am seeking guidance on how to pass values in an array to the ajax function in JavaScript. The goal is to call the function in JavaScript for each ID present in the array. I am looking for a way to pass each ID in the array and then call the function ac ...

javascriptjqueryhtmlajaxlit-element

What is the best method for arranging various items in separate lists using JQuery UI?

Currently, I have a setup with 4 lists. When I drop an item from the lower list into the first list, it creates clones in the two lists below. I am looking for a solution where I can take an element from the top list and it automatically takes its clones ...

jqueryjquery-uijquery-ui-sortable

What is the best way to retain selection while clicking on another item using jQuery?

There is a specific issue I am facing with text selection on the page. When I apply this code snippet, the selected text does not get de-selected even after clicking .container: jQuery('.container').on("mousedown", function(){ jQuery('. ...

javascriptjquerycss

Embed PHP file

This is my first venture into website development using php. I thought I had come up with a clever way to include the css sheet based on the file location. One example is when I submit a form with this code: $root = '../'; function died($err ...

phphtmlcss

Header Blocks that are Fixed While Scrolling in fullPage.js Sections Using the "scrollOverflow: true" Feature

I am experiencing an issue where a fixed header on my website prevents scrolling through sections when hovering, specifically when the setting scrollOverflow: true is enabled. However, everything works fine and scrolling through all sections is possible w ...

javascriptcssfullpage.js

Background image in Bootstrap not covering entire web page

I am facing an issue where the background image is confined within the constraints of the login panel, and I'm unsure why. My goal is for the image to span the full width and height of the browser window. Any assistance on this matter would be greatly ...

htmlcssimagetwitter-bootstrapbackground

"Optimizing Long Polling for Maximum Efficiency: Tips for utilizing php, Jquery

Hey everyone, I'm looking to implement real-time flash message notifications for users when they receive a new private message in their inbox. What is the most effective way to achieve this using technologies like PHP 5.3, jQuery, and JSON? I prefer ...

jqueryjsonnode.jssymfonylong-polling

Incorporating PHP arrays into JavaScript code within a PDO environment

I'm facing an issue trying to incorporate a PHP array into my JS code and I'm not sure how to resolve it. I found this example (I'm using PDO, not mysqli): Inserting MYSQL results from PHP into Javascript Array $pdo = new PDO('mysql:h ...

javascriptphpjquerymysqlpdo

The process of creating a React build varies greatly from the initial development phase

Thank you for offering to help me! After building my React web app, it looks very different from development mode. I use serve -s build to monitor the app build. However, even on my online DigitalOcean server, it doesn't appear the same as in develop ...

javascriptcssreactjsbuildstyled-components

Determine the exposed area of an element with overflowing content

I am looking for a way to determine which text within an element (such as a div or textbox) is currently visible when there is overflow. As the user scrolls, I need to have an updated list of the visible text. I am open to using any elements, but only a ...

javascriptjquery

Getting the selected option can be achieved by using the corresponding method

I have set up a dropdown menu like this: var hidDivSpan1 = $('<div></div>').addClass('span3'); var hidlabel1 = $('<label></label>').text('New Status: '); var hidSelect = $('<select na ...

jquerytwitter-bootstrap

Cookie-powered JavaScript timer ceases after 60 seconds

I'm having an issue with my countdown timer where it stops counting after just one minute. It seems to pause at 54:00 when I set it for 55 minutes, and at 1:00 when I set it for 2 minutes. Any suggestions on how I can resolve this and make it continue ...

javascriptjquerycookiestimer

Different ways to showcase multiple columns in a bootstrap dropdown

In my React JS application, I successfully implemented a bootstrap dropdown control (located below Tag) that meets my needs. However, I am now seeking guidance on how to display multiple columns in the dropdown menu. Specifically, I would like to show bo ...

reactjsbootstrap-4

Using JQuery's onChange event triggers actions based on the current values of input fields. However, in some

I am currently tackling an issue with a module that is designed to automatically select the only valid value from a Multi- or Single selection field when there is just one valid option and an empty choice available. Initially, everything was working smoot ...

javascriptjqueryhtmlacl