The position of the div relative to two other divs in the layout

My webpage has a layout with multiple collapsible divs, followed by another set of divs underneath them.

Currently, as demonstrated in the provided example, only clicking on box 3 or box 1 (the left column) triggers the bottom div to scroll down.

I am attempting to enable scrolling for the right column (boxes 2 and 4) similar to the left column, but I am encountering difficulties in achieving this functionality.

Thank you in advance for any assistance.

var drop = document.getElementsByClassName("drop");
    var i;
    
    for (i = 0; i < drop.length; i++) {
        drop[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var collapse = this.previousElementSibling;
            if (collapse.style.maxHeight) {
                collapse.style.maxHeight = null;
            } else {
                collapse.style.maxHeight = collapse.scrollHeight + "px";
            }
        });
    }
#panel{
    background-color: white;
    float: center;
    position: relative;
    width: 800px;
    margin: 0 auto;
    border-color: #B7B7B7;
    border-width: 2px;
    border-radius: 25px;
}
    
#box1{
    ...

<div id=panel>
<div id="box1">
...
</div>
javascriptjqueryhtmlcss

Answer №1

Since box2 and box4 are floated to the right, it's necessary to include a clearing element after all the boxes to reset the float property. I have inserted 

<div style="clear:both"></div>
following the boxes:

var drop = document.getElementsByClassName("drop");
var i;

for (i = 0; i < drop.length; i++) {
  drop[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var collapse = this.previousElementSibling;
  if (collapse.style.maxHeight) {
    collapse.style.maxHeight = null;
    } else {
    collapse.style.maxHeight = collapse.scrollHeight + "px";
    }
  });
}
#panel{
background-color: white;
float: center;
position: relative;
width: 800px;
/* height: 500px; */
margin: 0 auto;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 25px;
}

#box1{
border: 2px solid #B7B7B7;
  position: relative;
display: inline-block;
width: 250px;
top: 0;
left: 0;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}

#box2{
border: 2px solid #B7B7B7;
position: relative;
display: inline-block;
width: 525px;
top: 0;
float: right;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}

#box3{
border: 2px solid #B7B7B7;
display: inline-block;
top: 0;
left: 0;
width: 250px;
position: relative;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}

#box4{
border: 2px solid #B7B7B7;
display: inline-block;
position: relative;
top: 0;
float: right;
width: 525px;
border-radius: 5px;
transition: max-height 0.2s ease-out;
}

#travel{
margin: auto;
  background-color: black;
border-style: solid;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 5px;
position: relative;
margin-top: 15px;
width: 800px;
height: 300px;
}

.drop {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 5px;
  bottom: 0;
}

.active, .drop:hover {
  background-color: #ccc;
}

.collapse {
  padding: 0 18px;
  background-color: gray;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1">
<br>this is box 1<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2" style="margin-bottom: 15px;">
<br>this is box 2<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box4">
<br>this is box 4<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box3" style="margin-top: 15px;">
<br>this is box 3<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
    <div style="clear:both"></div>
<div id="travel">

</div>
</div>

Answer №2

Here's an example that utilizes the display: flex property for styling. In addition, I have consolidated the shared styles of the boxes into a class named .box.

var drop = document.getElementsByClassName("drop");
var i;

for (i = 0; i < drop.length; i++) {
  drop[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var collapse = this.previousElementSibling;
  if (collapse.style.maxHeight) {
    collapse.style.maxHeight = null;
    } else {
    collapse.style.maxHeight = collapse.scrollHeight + "px";
    }
  });
}
#panel{
background-color: white;
position: relative;
width: 800px;
/* height: 500px; */
margin: 0 auto;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.box {
border: 2px solid #B7B7B7;
  position: relative;
transition: max-height 0.2s ease-out;
  margin-bottom: 15px;
border-radius: 5px;
}

#box1{
width: 250px;
}

#box2{
width: 525px;
}

#box3{
width: 250px;
}

#box4{
width: 525px;
}

#travel{
margin: auto;
  background-color: black;
border-style: solid;
border-color: #B7B7B7;
border-width: 2px;
border-radius: 5px;
position: relative;
width: 800px;
height: 300px;
}

.drop {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 5px;
  bottom: 0;
}

.active, .drop:hover {
  background-color: #ccc;
}

.collapse {
  padding: 0 18px;
  background-color: gray;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<div id=panel>
<div id="box1" class="box">
<br>this is box 1<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box2" class="box">
<br>this is box 2<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box4" class="box">
<br>this is box 4<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="box3" class="box">
<br>this is box 3<br>
<div class="collapse">
<p>a drop</p>
</div>
<button class="drop">view more</button>
</div>
<div id="travel">

</div>
</div>

Answer №3

Initially, it is evident that the boxes have been styled individually despite their similar appearance. This approach can lead to difficulty in distinguishing specific styles for each box. (Further research on this topic is recommended)

The main issue in your situation is the use of the float property in both box 2 and box 4. When employing float, it is essential to utilize the overflow property to handle the floating contents effectively. Failure to do so may result in them being treated as if they are non-existent.

To make improvements in your fiddle, consider implementing these modifications:

Commence by tidying up your html:

<div id=panel>
  <div class="boxes">
    <div class="left">
      <div class="box" id="box1">
        <br>this is box 1</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
      <div class="box" id="box3">
        <br>this is box 3</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
    </div>

    <div class="right">
      <div class="box" id="box2">
        <br>this is box 2</br>
        <div class="collapse">
              <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
      <div class="box" id="box4">
        <br>this is box 4</br>
        <div class="collapse">
          <p>a drop</p>
        </div>
        <button class="drop">view more</button>
      </div>
    </div>
  </div>

  <div id="travel">

  </div>
</div>

I have removed unnecessary inline styles to maintain clarity in your markup - excessive use of these styles could complicate things in a larger application. Additionally, I have incorporated classes to eliminate redundant repetition.

Your css code will be neater with adjustments like these: 

.boxes {
  overflow: auto;
  margin-bottom: 10px;
}

.boxes .right {
  width: 525px;
  float: left;
  padding-left: 10px;
}

.boxes .left {
  width: 250px;
  float: left;
  padding-right: 10px;
}

.box {
  border: 2px solid #B7B7B7;
  position: relative;
    display: inline-block;
  border-radius: 5px;
  transition: max-height 0.2s ease-out;
  width: 100%;
  margin-bottom: 10px;
}

Note the utilization of overflow for div elements containing child elements with a float property.

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

Pair of Javascript Functions Using Async with Parameters

This question builds upon a previous inquiry raised on Stack Overflow: When considering approach number 3 (referred to as the "counter" method), how can we ensure that the function handleCompletion can access necessary data from startOtherAsync to perform ...

javascriptjqueryasynchronous

Tips for concealing Bootstrap 5 modal exclusively after successful completion

Utilizing the power of Bootstrap 5 I have successfully implemented a modal that shows up when #truck_modal is clicked, thanks to the following JavaScript code: (this snippet is located at the beginning of my js file) document.addEventListener('DOMCo ...

javascriptbootstrap-modalhidebootstrap-5

Is there a way to automatically float right on smaller screens and float left on larger screens?

Is there a way to create an effect where the image is on the left side of the text, but when the screen size is reduced, the text goes on top and the image is below? Currently, I have the opposite layout - the image appears above the text when the screen ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for generating a new div for every iteration:

I am currently using asp.net with c# along with a Master Page. I have been attempting to create a new div for each loop in the while statement in order to customize the design as I desire. Is there a way to achieve this or is there an alternative method th ...

c#htmlcssasp.netloops

getStaticProps will not return any data

I'm experiencing an issue with my getStaticProps where only one of the two db queries is returning correct data while the other returns null. What could be causing this problem? const Dash = (props) => { const config = props.config; useEffect(() ...

javascripttypescriptnext.js

retrieve the value 'name' from the second array

array(4) { [0]=> object(stdClass)#1 (3) { ["id"]=> int(9292) ["name"]=> string(41) "Voetbal : Limburg - 1ste Ploegen - Hommes" ["ranking"]=> array(0) { } } [1]=> object(stdClass)#2 (3) { ["id"]=> ...

phphtml

Bypassing reCaptcha V2 in C# Selenium without relying on callback functions

Recently, I have been utilizing the 2captcha.com API to bypass reCaptcha V2. However, I seem to be encountering an issue with implementing the callback function. Every time I try to run the callback function, nothing seems to happen and the output is alway ...

javascriptc#seleniumrecaptcha

Is the dts lib for touchevents supported by TypeScript version 1.7.6?

Recently, I came across a post discussing whether TypeScript supports TouchEvent. The article mentioned that TypeScript 1.5.3 included declarations for HTML Touch events in lib.d.ts. But now, with TypeScript version 1.7.6, I'm encountering an error i ...

jquerytypescriptdefinitelytyped

Ways to add a CSS class to an ID that immediately follows

I've been working on an editable table using the HTML5 attribute contenteditable. Everything was going smoothly until I had an idea to highlight the cell that was just updated by adding a class called alert-danger from Bootstrap. Once a cell is succe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Arrange the JSON object according to the date value

I am working on a JavaScript project that involves objects. Object {HIDDEN ID: "06/03/2014", HIDDEN ID: "21/01/2014"} My goal is to create a new object where the dates are sorted in descending order. Here's an example of what I want: SortedObject ...

javascriptjsonsortingdateobject

How can I prevent further input in an input field after making a selection from mat autocomplete in angular?

Hello everyone, I am looking to disable the input field after selecting a value from the drop-down. Additionally, I want to be able to reset the selected value using a reset button. If you need a reference, you can check out Stackblitz: https://stackblitz ...

htmlangulardisabled-inputmat-autocomplete

Ensuring my form adjusts effortlessly to the sprites

I need assistance in making my contact form responsive to match the eagle sprite on this specific webpage: The goal is to ensure that as the screen size changes, the eagle's mouth aligns perfectly with the form. While the sprites and form are both re ...

htmlcss

Guide on breaking up a string into separate lines

Can someone help me with separating the strings in this line "Add Problem Report \n Add Maintenance Report \n Add Expenses Report \n Add Contract", into new lines? I have tried using br, pre, and \n but it does not seem to work. HTML ...

htmltwitter-bootstrap

In Safari, use a reversed angle for a -webkit-linear-gradient

While searching for a CSS solution to create a uniformly colored element with an angled start without using images, I came across a simple example that caught my attention: . This method works well in most browsers, but I encountered an issue in Safari whe ...

csssafarianglelinear-gradients

Ways to clearly establish the concept of "a"

module.exports.getData = function (id) { const userData = require("./data/Users.json"); if (userData.find(user => user.uid === id)) { return user.name; } else return "User"; } I'm trying to display the name of a user, but the consol ...

javascriptnode.jsjson

How to use jQuery to hide a certain div within an iframe

I am currently developing a webview application using PhoneGap. I have implemented the iframe method to display my website within the application. However, I encountered an issue where I need to display a popup message for mobile browser users prompting th ...

javascriptjquerycordovaiframephonegap

Display discrepancies between Internet Explorer and Firefox

I have been working on a website project using Bootstrap. The design looks great, but I am facing an issue with the items being displayed incorrectly on IE and Firefox, while they render perfectly on Chrome. To troubleshoot, I checked the CSS properties i ...

htmlcssinternet-explorerfirefoxtwitter-bootstrap-3

A guide on achieving server-side rendering in React despite facing various conflicts with React Router versions

I encountered an error while trying to implement server-side rendering with React and react-router-dom. The error message You should not use Switch outside a Router has me puzzled. I suspect it might be due to a version conflict, but I'm searching for ...

javascriptnode.jsreactjsreact-router

Display two separate views or templates on the screen using AngularJS

Currently, I am developing a mobile app powered by Angular and I am looking to create a unique view that displays halves of two separate views. The user should be able to switch between the two views by swiping up or down. Can anyone provide advice on how ...

javascriptangularjsmobileangularjs-directivetouch

Tips for retrieving a value with jquery

I am looking to display the name along with the address for each entry. var data = ['{first: era, gold, jack}', '{two: london, USA, India}']; $.each(data, function(index, item) { alert(item); //result era london, gold USA, jack ...

jquery