Issue with transition or animation not functioning when the element is positioned prior to the toggle

Why are only the elements after the toggle working in this code snippet that animates visibility? The ones before don't seem to be affected. Any ideas on why this behavior is occurring?
I'm testing this code in the latest version of Chrome.

.element-1 {
    transform-origin: top;
    transform: scaleY(1);
    transition: all 0.5s ease-out;
    overflow: hidden;
}

input[type="checkbox"]:checked~.element-1 {
    transform: scaleY(0);
    transition: all 0.5s ease-in;
}
<div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>

<div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Element</label>

<div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>

<div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>

htmlcsscss-animationscss-transitionscss-transforms

Answer №1

~ selector is used to select only subsequent elements, not previous ones, which is why it doesn't work for previous siblings. If you want to learn more about this, you can read more here.

However, there is a workaround to select previous siblings as well. You need to add a wrapper and use the :has selector to target all siblings.

.element-1 {
  transform-origin: top;
  transform: scaleY(1);
  transition: all 0.5s ease-out;
  overflow: hidden;
}
.wrapper:has(input:checked) .element-1 {
  transform: scaleY(0);
  transition: all 0.5s ease-in;
}
<div class="wrapper">
  <div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
  </div>

  <div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
  </div>

  <input type="checkbox" id="toggle">
  <label for="toggle">Toggle Element</label>

  <div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
  </div>

  <div class="element-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
  </div>

</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

datetime-local format changing after selection

In an ionic application running on an android system, there is a issue with the formatting of <input type='datetime-local'> inputs. After a user selects a date, the Start input is formatted differently than the Ende input. Attempts to use t ...

javascripthtmlangularjsdate

The function nivoSlider cannot be found in the selected element

I'm having trouble integrating Nivoslider into my website, it's not working for me. Can someone please help me with this issue? Interestingly, it's working fine on my local machine but not on my server. I have tried other suggested solutions ...

html

Creating a string of DIV elements with PHP and mySQL - is it possible?

I am in the process of creating a well-formatted product list using data from an SQL database. The goal is to have my website display a store layout with small boxes containing brief information about each product that, when clicked, will open up detailed ...

phpmysqlsqlhtmldivider

Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Check out the fiddle to see the animation in action! The image is programmed to ascend until its bottom aligns with the bottom of the div, and then descend until its top aligns with the top edge of its parent div, revealing the image in the process. ...

javascriptjqueryhtmlcss

Is it possible to showcase a notification as a popup or alert in Django?

I'm working on a form in Django that redirects to itself after submission. I want to show a message saying "You have entered (work_area)" as a popup or alert that users can close. However, my current setup only displays the message within the HTML aft ...

pythonhtmldjangopopupalert

changing pictures with jquery

Struggling with this code snippet: $('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow"); $('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow"); No matter which ...

javascriptjquerycss

Adding options to a select element using JavaScript dynamically

Is there a way to create a dynamic select list for year values using JavaScript? <form action="something"> some other fields <select id="year"> </select> </form> ...

javascripthtml

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

javascripthtmlcssreactjs

Tips for Identifying Different ID Values of HTML Elements with jQuery

Currently, I have two different divs on my webpage, each containing buttons and hidden fields. When I try to pass the value of the hidden field attached to the button in a jQuery function, I encounter an issue where clicking on the second div results in pa ...

javascriptjqueryhtml

When a specific JavaScript function is triggered, the value of an HTML control will reset to its original default value

I have a form with a specific requirement. I need to allow users to input data in a text field and press enter, which should dynamically create new controls like another text field, a dropdown menu, and another text field using jQuery. While the functional ...

javascriptjqueryhtml

I encounter a difficulty in changing the background color when I click on the horizontal navigation menu, as it does not display the currently selected menu

.unorder_Hnav,li,.classes:active { background-color:#7CA738; height: 50px; display: table-cell; width: 1024px; text-align: center; line-height: 52px; font-weight: bolder; color: #FFFFFF; background-color: #457025; ...

htmlcss

Unable to align text in the middle of the header

Seeking help with my design flaws, I have created a fiddle to showcase the issues that arise when attempting to make it responsive. The main problem is that the HEADING IN CENTER text is not aligned properly in the center. If I remove the position attribut ...

htmlcssresponsive-designsemantic-ui

identify external components based on their internal identifiers

Can we target an external element based on its descendant elements? This question arises from the need to apply one stylesheet to two different dynamic pages within the same wrapper. Page 1 <div id="api"> <div class="a"></div> </div ...

csscss-selectors

Having trouble with implementing checkbox hack syntax

I'm trying to achieve a unique effect where a label gets styled and a div gets revealed when a checkbox is checked. Surprisingly, I've managed to make one happen without the other in my attempts. Even though the CSS is consistent in both instance ...

htmlcsscheckbox

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with JavaScript var changeHeight = () => { let flag = 0; while(flag != 1) { size += 1; return size; } if(size == window.innerHeight/2){ flag == 1; } } var size = 5; document.body.style.height = &qu ...

javascripthtmlcss

How can I change the displayed value of a 'select' element programmatically in Internet Explorer?

My interactive graphic has a drop-down menu implemented with a <select> element. Everything functions correctly, except when using Internet Explorer. The issue arises when attempting to programmatically change the selected value of the <select> ...

javascripthtmlformsd3.js

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...

htmlcss

Issues encountered with MP4 HEVC video playback on Chrome browser

My Wordpress website hosts videos uploaded by users in mp4 format. While it's not ideal for performance, I am doing this for a beta test period of a few months. Some of the mp4 files aren't functioning correctly, showing only sound with a black ...

htmlwordpressvideomp4hevc

Exploring an unusual HTML structure using Python's Beautiful Soup and urllib for web scraping

While extracting data may not be a challenge, the real issue lies in locating it. My focus is on scraping football data from a website that presents statistics either for all years or for specific seasons. However, despite selecting a particular season, ...

javascripthtmlpython-3.xweb-scrapingbeautifulsoup

Get the skin image link from the app folder in Magento

I am attempting to manually insert social icons into my project. projectname/app/design/frontend/projectname/default/template/page/html/footer.phtml This is the HTML code: <a src="../">facebook</a> What is the proper method to link the imag ...

htmlcssmagentotheming