Tips for keeping a div stationary when an adjacent div expands

Question

Tips for keeping a div stationary when an adjacent div expands

I am facing an issue with 3 blocks in a row - a large block, a smaller block that can expand, and a third block placed under the first block. When the smaller block expands, the top of the third block moves to match the bottom of the expanding div. However, I need the third block to stay at the bottom of the first block.

I have tried different configurations using Bootstrap columns, but I am struggling to maintain the desired layout on mobile. I have also explored using card-columns but faced limitations in customizing the width and order of appearance on mobile devices.

To illustrate the problem, I have created a fiddle: https://jsfiddle.net/k53rnvpb/1/

$('.expand').click(function() {
  $('.block-2').toggleClass('height-300');
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"] {
  border: solid 1px #6c757d;
  padding: 10px;
}

.block-1 {
  height: 200px;
}

.block-2 {
  height: 150px;
}

.block-3 {
  height: 200px;
}

.height-300 {
  height: 300px;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-8 block-1">
      Block 1
    </div>
    <div class="col-12 col-sm-4 block-2">
      Block 2
      <p>I need to be between block 1 and 3 on mobile</p>
      <button class='btn btn-primary expand'>Expand</button>
    </div>
    <div class="col-12 col-sm-8 block-3">
      Block 3
      <p>If block 2 expands i still need to be attached to block 1</p>
    </div>
  </div>
</div>

I am seeking a solution to prevent the bottom block from moving when the other block expands or to find a clean way to position the expanding block between the other two blocks on mobile devices.

I hope the issue is clear, and I appreciate any assistance.

jquery html css bootstrap-4

Answer 1

Answer №1

There are a couple of methods to achieve this. One option is to duplicate the div content, but that may not be the most efficient solution. Another solution involves using media queries. It's important to note that while you have given a border to the column, I have applied a border to the content div.

This approach addresses two key issues: 1. Expanding the div will not affect its height. 2. Block 2 will remain centered between block 1 and block 3.

$('.expand').click(function() {
  $('.block-2').toggleClass('height-300');
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"] {
  border: solid 1px #6c757d;
  padding: 10px;
}

.block-1 {
  height: 200px;
  clear: both;
}

.block-2 {
  height: 150px;
  position: absolute;
  border: solid 1px red;
}

@media only screen and (max-width: 767px) {
  .block-2 {
    position: relative;
  }
}

.block-3 {
  height: 200px;
}

.height-300 {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 block-1">
      Block 1
    </div>
    <div class="col-12 col-md-4" style="padding: 0;">
      <div class=" block-2">
        Block 2
        <p>I need to be between block 1 and 3 on mobile</p>
        <button class='btn btn-primary expand'>Expand</button>
      </div>
    </div>
    <div class="col-12 col-md-8 block-3">
      Block 3
      <p>If block 2 expands I still need to be attached to block 1</p>
    </div>
  </div>
</div>

https://jsfiddle.net/g21eqyxn/11/

Answer 2

There are a couple of methods to achieve this. One option is to duplicate the div content, but that may not be the most efficient solution. Another solution involves using media queries. It's important to note that while you have given a border to the column, I have applied a border to the content div.

This approach addresses two key issues: 1. Expanding the div will not affect its height. 2. Block 2 will remain centered between block 1 and block 3.

$('.expand').click(function() {
  $('.block-2').toggleClass('height-300');
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"] {
  border: solid 1px #6c757d;
  padding: 10px;
}

.block-1 {
  height: 200px;
  clear: both;
}

.block-2 {
  height: 150px;
  position: absolute;
  border: solid 1px red;
}

@media only screen and (max-width: 767px) {
  .block-2 {
    position: relative;
  }
}

.block-3 {
  height: 200px;
}

.height-300 {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 block-1">
      Block 1
    </div>
    <div class="col-12 col-md-4" style="padding: 0;">
      <div class=" block-2">
        Block 2
        <p>I need to be between block 1 and 3 on mobile</p>
        <button class='btn btn-primary expand'>Expand</button>
      </div>
    </div>
    <div class="col-12 col-md-8 block-3">
      Block 3
      <p>If block 2 expands I still need to be attached to block 1</p>
    </div>
  </div>
</div>

https://jsfiddle.net/g21eqyxn/11/

Answer 3

Answer №2

I made a tweak by adding a nested <div class="expander"> within the second expanding DIV and adjusted the height expansion to this inner div. I trust it now functions as per your requirement.

Towards the end of the css, a media query has been included. Ensure to tailor it accurately to suit your small screen resolution.

Kindly note that this may not work seamlessly in the snippet as bootstrap is not integrated. Please test it in your own code.

$('.expand').click(function(){
$('.expander').toggleClass('height-300');
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"],
.expander{
  border: solid 1px #6c757d;
  padding: 10px;
}
.block-1{
    height: 200px;
}
.block-2{
    height: 150px;
    border: none;
    padding: 0;
}
.block-3{
    height:200px;
}
.height-300{
    height: 300px;
}

/*Fine tune this media query based on your desired mobile resolution*/
@media screen and (max-width: 600px){
  .block-2{
    height: auto;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 block-1">
            Block 1
        </div>
        <div class="col-12 col-md-4 block-2">
          <div class="expander">
          Block 2
            <p>I need to be between block 1 and 3 on mobile</p>
            <button class='btn btn-primary expand'>Expand</button>
          </div>
        </div>
        <div class="col-12 col-md-8 block-3">
            Block 3
            <p>If block 2 expands i still need to be attached to block 1</p>
        </div>
    </div>
</div>

Answer 4

I made a tweak by adding a nested <div class="expander"> within the second expanding DIV and adjusted the height expansion to this inner div. I trust it now functions as per your requirement.

Towards the end of the css, a media query has been included. Ensure to tailor it accurately to suit your small screen resolution.

Kindly note that this may not work seamlessly in the snippet as bootstrap is not integrated. Please test it in your own code.

$('.expand').click(function(){
$('.expander').toggleClass('height-300');
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

[class^="col-"],
.expander{
  border: solid 1px #6c757d;
  padding: 10px;
}
.block-1{
    height: 200px;
}
.block-2{
    height: 150px;
    border: none;
    padding: 0;
}
.block-3{
    height:200px;
}
.height-300{
    height: 300px;
}

/*Fine tune this media query based on your desired mobile resolution*/
@media screen and (max-width: 600px){
  .block-2{
    height: auto;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 block-1">
            Block 1
        </div>
        <div class="col-12 col-md-4 block-2">
          <div class="expander">
          Block 2
            <p>I need to be between block 1 and 3 on mobile</p>
            <button class='btn btn-primary expand'>Expand</button>
          </div>
        </div>
        <div class="col-12 col-md-8 block-3">
            Block 3
            <p>If block 2 expands i still need to be attached to block 1</p>
        </div>
    </div>
</div>

Tips for keeping a div stationary when an adjacent div expands

Answer №1

Answer №2

Similar questions

Output information to the specified divID using Response.Write

Injecting script into a webpage and initiating an ajax request prior to receiving a response

The initial row's Id will be used as the Id for all subsequent rows within a JSON object

Transfer PHP's uniqid() function to real-time using JavaScript with jQuery

What is causing my Javascript media query for the sidebar to not function properly?

Failure to receive results from $.getJSON request

Ensure that the top of a div stays in place as the user scrolls, and spans the entire width of the div

What happens when the `.push` command runs the "Undefined" function in jQuery - is it possible to execute a number instead?

Incorporate additional text to the downloads hyperlink using jquery

Converting a webpage into UTF-8 format

Keep track of the toggled state and prevent any flickering when the page is reloaded, all without the

Invokeing JQ's on() function to trigger a click event on a concealed Google Infobox.Js

Switching a div class in Angular 6 with a button click: A step-by-step guide

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from

Creating a contact form in WordPress that triggers a separate PHP file

You can use the following code to retrieve the value of the checked radio button with the name "nameOfradio", but make sure that the radio button

Can one jQuery script be used for multiple ajax 'like' buttons?

Visual button spacing

Incorporating conditional statements within a loop

When I attempt to press the shift + tab keys together, Shiftkey is activated