Activating several divs using transition

Question

Activating several divs using transition

Is there a way to trigger 2 or more divs with one transition? For example, when clicking on one box, can I make the width and height of both boxes change to 400px simultaneously? Ideally, I would like to achieve this using only HTML and CSS. If not, are there any other options available? Thank you!

<!DOCTYPE html>

<html>
<head>
<style>

    .box1{
        width:200px;
        height:200px;
        background-color:red;
    }

    .box2{
        width:200px;
        height:200px;
        background-color:black;
    }


</style>
</head>

<body>

<div class="box1"></div>
<div class="box2"></div>

</body>
</html>

html css css-transitions transition

Answer 1

Answer №1

Here is the HTML structure:

<div class="container">
<div class="box"></div>
<div class="box"></div>

This CSS code will style the boxes:

.box {
  width:100px;
  height:100px;
  background:red;
  display:inline-block;
}

.expanded {
  width:200px;
  height:200px;
  transition: height 1s linear, width 1s linear;
}

You can view the demo on jsfiddle: http://jsfiddle.net/fBETk/6/

By clicking on one box, both boxes will increase in size simultaneously.

If you prefer not to use JavaScript, you can utilize the "checkbox hack" technique like this:

<label for="toggleBtn">
<input type="checkbox" id="toggleBtn">
<div class="box"></div> 
<div class="box"></div>
</label>

For the corresponding CSS styling:

.box {
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
    transition: all 1s linear;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox]:checked ~ .box{
    width:200px;
    height:200px;
}
label {
    display: block;
}

Demo using the checkbox hack on jsfiddle: http://jsfiddle.net/fBETk/9/

Answer 2

Here is the HTML structure:

<div class="container">
<div class="box"></div>
<div class="box"></div>

This CSS code will style the boxes:

.box {
  width:100px;
  height:100px;
  background:red;
  display:inline-block;
}

.expanded {
  width:200px;
  height:200px;
  transition: height 1s linear, width 1s linear;
}

You can view the demo on jsfiddle: http://jsfiddle.net/fBETk/6/

By clicking on one box, both boxes will increase in size simultaneously.

If you prefer not to use JavaScript, you can utilize the "checkbox hack" technique like this:

<label for="toggleBtn">
<input type="checkbox" id="toggleBtn">
<div class="box"></div> 
<div class="box"></div>
</label>

For the corresponding CSS styling:

.box {
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
    transition: all 1s linear;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox]:checked ~ .box{
    width:200px;
    height:200px;
}
label {
    display: block;
}

Demo using the checkbox hack on jsfiddle: http://jsfiddle.net/fBETk/9/

Activating several divs using transition

Answer №1

Similar questions

What is the solution for accessing properties of a non-object?

What is the process for setting data to the value attribute in an input tag, retrieved from a firebase database?

Using CSS to position two divs at the bottom-right corner of the page by using the `position: absolute` property

"Encountered an HTTP 400 error when trying to retrieve content from a Persian URL using file

Incorporating text onto an HTML webpage

Angular ng-repeat can sometimes lead to annoying flickering on the webpage

Assistance required with scrollable tab content in Chakra UI

Centering Text and Image in React Horizontally

Creating a custom grid layout with Bootstrap 4

Positioning a Form with Sliding Out Effects Using CSS

leveraging jquery for delaying, subsequently fading out, and ultimately removing

What would you suggest as a more effective method for preventing content overlap during multi uploads?

Implementing a Vertical Scrollbar for tbody Using Bootstrap Table Styles

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

Choose a random cell in Jquery every second

What happens when browsers encounter unfamiliar attributes in HTML code

Make sure to look for the sub-division mouse-over feature

The slider components have an endless loop feature that only runs once before coming to a

There is a significant spacing issue between the header and main category when viewed on a mobile device

I am perplexed by the fact that the Div is nested within the "a" element