Displaying text in the incorrect location due to issues with the bootstrap collapse feature

I have implemented Bootstrap 4 collapse feature to show text when clicked, however, I am facing an issue with the placement of the content. The text is currently being displayed on the right side when clicking the button, but I would like it to appear below the button instead.

Can someone please advise me on how to make this change?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row mt-4 mb-4 product-card-element text-left">
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
                            Test1
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
                            Test 2
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
                            Test 3
                        </button>
  <div class="collapse" id="description">
    test test description
  </div>
  <div class="collapse" id="requirements">
    <ol class="list-group-numbered">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
  <div class="collapse" id="output">
    test test
  </div>
</div>

htmlcssbootstrap-4

Answer №1

If you want the collapsing div to display below the button, one approach is to enclose each button-div pair within a parent div, as shown in the following example:

<div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
        Test 3
    </button>
      
    <div class="collapse" id="output">
        test test
    </div>
</div>

Here's a demo for reference:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row mt-4 mb-4 product-card-element text-left">
  <div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
                            Test1
    </button>
                        
    <div class="collapse" id="description">
    test test description
    </div>
  </div>
  
  <div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
                            Test 2
    </button>
    <div class="collapse" id="requirements">
      <ol class="list-group-numbered">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ol>
    </div>
  </div>
  
  <div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
                            Test 3
    </button>
  
  
    <div class="collapse" id="output">
      test test
    </div>
  </div>
</div>

Answer №2

To enhance the functionality, you can insert additional rows and columns as needed to control the display output and apply CSS styling.

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>

</style>
</head>
<body>

 <div class="row">
  <div class="column">

<div class="row mt-4 mb-4 product-card-element >
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
                            Test1
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
                            Test 2
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
                            Test 3
                        </button>
                  </div>      
     <div class="column">                     
  <div class="collapse" id="description">
    test test description
  </div>
  
  <div class="collapse" id="requirements">
    <ol class="list-group-numbered">
    

      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
</div>
</div>
    </ol>
  </div>
  <div class="collapse" id="output">
    test test
  </div>
</div>

</body>
</html>

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

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

I am working with this ASPX code: <div id="IsAccountingOk" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a><br /> <asp:Label ID="lblIsAccountingOkHeader" runat="server" Text ...

javascriptc#htmlcssasp.net

relocating the input field underneath the button

I need help figuring out how to arrange this. Here's an example link: http://jsfiddle.net/VBS4E/25/ Is there a way to position the input field directly below the button? Like this: ________ __________ __________ | Btn#1 | | Btn#2 | | Btn# ...

htmlcss

Solution: Resolve clientY scrolling issue within an HTML document

I am facing an issue with the positioning of my context menu. When I right-click and scroll down, the menu does not maintain its regular position. Instead of appearing to the right of the mouse cursor when stationary, it moves below the cursor based on how ...

javascripthtmlcssbootstrap-5

What specific CSS style should I use to adjust opacity when printing from Internet Explorer 8?

I created a webpage with two overlapping images, applying an opacity filter to the top image for readability. While the opacity displays correctly on screen in most browsers like IE and Firefox, issues arise when printing from IE 7 or 8; only the top image ...

cssprintinginternet-explorer-8opacity

Altering the color scheme of a specific column within a stacked bar chart using C3.js

I'm currently facing a challenge with highlighting specific values in a c3.js stacked bar chart. While I was able to change the color of an individual bar in a non-stacked bar following this example, I'm struggling to determine how to identify th ...

javascriptcssc3.js

What is the best way to retrieve text from the p tag and input it into the text field?

Looking to resolve a situation where two identical IDs exist and need to implement some JQuery. The objective is for the input value to automatically update itself based on changes in the text of the p tag. $(document).ready(function(){ ...

javascripthtmljqueryjsonjquery-plugins

I'm attempting to access CapCut through the site with Selenium, but I'm having trouble clicking on a specific button

My goal is to click on a specific button with the following code: <button class="lv-btn lv-btn-primary lv-btn-size-default lv-btn-shape-square lv_sign_in_panel_wide-primary-button" type="button"><span>Continue</span>&l ...

pythonhtmlselenium-webdriver

Stop Internet Explorer from automatically scrolling when it gains focus

Please access this fiddle using internet explorer (11): https://jsfiddle.net/kaljak/yw7Lc1aw/1/ When the page loads, the <p> tag is focused and Internet Explorer slightly scrolls the element so that the table border becomes invisible... document.qu ...

javascripthtmlcssinternet-explorer

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

Ways to retrieve a particular class attribute within a less mixin

Having trouble with the .aClass? .aClass { width: 20px; height: 20px; } Looking to dynamically calculate a width value in .anotherClass based on the width of .aClass. .anotherClass { width: .aClass.width } Unfortunately, the code snippet above is no ...

csslessmixinsless-mixins

Encountering a React JS error while compiling projects

Every time I attempt to compile my project, everything goes smoothly until it reaches the database call, where I encounter this error: ./node_modules/msnodesqlv8/lib/sqlserver.native.js module not found: Error: Can't resolve 'fs' ./node_mo ...

javascripthtmlnode.js

What is the best way to ensure a div container fills the entire height of the screen?

I am currently working on developing my very first iOS HTML5 app, which is a simple quote application. One challenge I am facing is how to set the height of my container div to match that of an iPhone screen. You can view the design I have so far on this j ...

htmlcss

What is the best way to show or hide a child element when I hover over its parent?

Here is a snippet of HTML code for you: <style> .icon {display:none;} </style> <ul> <li>ABC <i id="abc" class="icon">x</i></li> <li>DEF <i id="def" class="icon">x</i></li> <l ...

javascriptjqueryhtmlajaxasynchronous

Images that are automatically generated cannot be interacted with by clicking on them

I currently have 4 images loaded onto my website. Whenever I click on one of the images, it becomes highlighted as desired using the following code: JavaScript Function 1 : var ImageSelector = function() { var imgs = null; var selImg = null; retu ...

javascriptjqueryhtmlcss

Get Your Business Rolling with the Shopify Cruise Theme

I'm currently utilizing the ride theme on my Shopify website and I've embedded a video in an index.json file: "video_url": "https:\/\/www.youtube.com\/watch?v=KlxiEKrhWIQ", Is there a way to make the video aut ...

cssjsonshopify

Is CSS causing a overflow when trying to print 210mm by 297mm on A4?

Take a look at this basic HTML code : <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .page { width: 200px; height: 500px; background ...

htmlcssprinting

As the div elements stack up and you scroll towards the top or bottom

I am dealing with two nested DIVs that are both scrollable. When I scroll the "inside div" (the green one in the attached file), and reach the bottom of the DIV, it starts scrolling the DIV beneath it. How can I prevent the DIV beneath from scrolling only ...

htmlcss

How do you trigger the playback of a specific audio file when a user clicks on it?

I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...

javascripthtmlcss

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global sty ...

cssreactjsnext.jsglobal

Tips for resolving issues with dropdown menu placement

Here is the current state of my HTML and CSS code: <div class="header"> <div class="container-fluid"> <div class="row"> <div class="col-1"></div> <div class="col-10"></div> <div class="col-1 dropd ...

htmlcssbootstrap-4dropdown