"Div vanishes mysteriously while CSS transition is in progress

When I have two divs positioned alongside each other, and one collapses to the left upon clicking a button, the remaining div on the right fills the available space due to its width being set at 100%. However, during the collapsing transition, the right div momentarily disappears. I am trying to understand why this happens.

Here is the HTML code:

<div>
  <div id="demo" class="collapse show width">
    <aside>
    </aside>
  </div><!--COLLAPSE-->

  <main>
    <button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
      Simple horizontal collapsible
    </button>
    <div class="sample">
      Some Text
    </div>
  </main>
</div>

Here is the CSS code:

html {
  height: 100%
}

body {
  height: 100%;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background: gray;
}

a {
  color: #00B7FF;
}

.collapse {
  visibility: hidden;
}

.collapse.show {
  visibility: visible;
  display: block;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.45s;
  transition-duration: 0.45s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

aside {
  height: 100vh;
  width: 250px;
  background-color: white;
  /*border-right:1px solid black;*/
  display: block;
  float: left;
}

.sample {
  margin-top: 100px;
  text-align: center;
}

main {
  width: 100%;
  height: 100vh;
  background-color: pink;
  display: inline;
}

Here is a live example for reference: https://jsfiddle.net/djjvqtop/1/

This issue is consistent across all browsers. I'm seeking a solution to prevent the momentary disappearance of the right div during the collapse transition.

Answer №1

The issue arises from the fact that including overflow: hidden results in a change in height of #demo. Initially, the height is 0 since it only contains the float element. The addition of the class .collapsing with overflow: hidden causes it to expand and encompass the float. Consequently, #demo.collapsing takes on the height of the <aside>, pushing the <main> element below and out of view.

To resolve this, one option is to also make #demo float left.

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

What is the best way to eliminate the gap above a block element using CSS?

Currently in the process of designing a website, I am faced with a challenging issue that seems to have me stumped. The structure of my page consists entirely of HTML DIVs, with certain elements nested within their parent DIVs. My main dilemma lies in tryi ...

Utilizing the GET method within a form

I'm currently working on testing a form to ensure that my input values are being submitted correctly. At this point, I haven't set up any server script yet. However, I was hoping that upon clicking submit, I would be able to see my values appende ...

Is there an advantage to pre-rendering a circle on an HTML5 canvas for improved performance?

Is it more efficient to pre-render graphics for a basic shape like a circle on an off-screen canvas? Would there be noticeable improvements in rendering performance when dealing with 100 circles at game-like framerates? What about 50 circles or just 25? ...

Issue with CSS Scroll Bar

I recently incorporated an Accordion and Slideshow feature into my website located at However, when clicking Play on either feature, a scroll bar unexpectedly appears causing the page to shift. I suspect that I may have forgotten to set the height for a ...

Tips for setting up an automated system to check feeds

While I have experience parsing and setting up databases in PHP, I am now faced with the challenge of constantly monitoring an XML feed for a specific string within one of the tags. Each time this string is detected, I need to add the entire XML item (incl ...

Can a border-bottom be made the same size as a class it is not linked to in CSS?

Can I set a border-bottom to match the size of a separate class? For example, I want a border-bottom at the bottom of each <section> tag. However, since the sections span the full width of the screen, the border-bottom inherits that width. Each < ...

What is preventing the click function on a dynamically created button from being executed in jQuery?

Take a look at this jsFiddle where I illustrate my issue. Whenever I click on the "Add an ingredient" button, the button click event is triggered. My issue arises when I click on the "Create a subtitle" button because it dynamically creates "Add an ingredi ...

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

What could be causing the issue with Hindi text not displaying properly on Safari?

I'm having trouble with displaying Hindi text on my website. I tried pasting the text in a new file and it worked, so why is it not loading correctly in this case? The Hindi script is within the second span with the class word w2. "use strict"; le ...

navigation bar directing to the wrong destination

My landing page has attached pages like landing/gothere and /another. The issue arises when I try to navigate from /another to landing/gothere. I fetch landing information using an API, but there's a delay when I click on the navbar link. The page loa ...

Is there a way to iterate through indexed variables in javascript?

After receiving an array of data from a JQuery .ajax function, I noticed that the fields in the array are named and numbered like part1, part2, part3, etc. I attempted to loop through this data using the code below, but unfortunately, it resulted in NaN: ...

Unable to toggle class feature

I have a trio of play buttons for a custom player setup, displayed like so: <div> <div class="gs-player"> <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div> </div> <div class="gs-player"> ...

The SrollToTop function is ineffective when used with a component in Ionic 6/Angular

Recently, I implemented a fabbutton feature that allows users to scroll to the top of a page with just one click. Initially, I tested this functionality without using it as a component, and everything worked perfectly. However, now I want to turn this fabb ...

Creating a versatile design using a combination of grids, HTML tables, and media queries to ensure

When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...

How can I restrict the number of characters per line in a textarea using javascript or jQuery?

Is there a method to control the number of characters per line in a textarea? For example, on lines 1-3 of the textarea, only 20 characters can be entered, while on subsequent lines, up to 50 characters are allowed. The current structure of the textarea l ...

What is the best way to activate an onchange function when using a <select> element?

Is there a way to automatically trigger a JavaScript function without the need for user input, while still having a default option selected? <select class="custom-select" name="" id="timer1numbers" onchange="getSelecte ...

How can we ensure that specific criteria are displayed once a selection is made?

Users have multiple options to choose from. When a user selects one option, I want to display additional options that are dependent on the initial selection. For example, if the user can select between 1 or 2 gates, upon choosing a number I will show all t ...

Incorporating visuals into Doxygen documentation

Struggling to add an image with a caption in a doxygen .md file. Adding a caption is easy, but aligning the image left is proving difficult. I've tried several methods, but none have worked successfully. ![Caption](my_image.png "Caption") R ...

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...

Adding a simulated bottom border to a rotated container

Currently, I am utilizing the CSS3 rotate value to create an arrowhead effect for modal boxes. However, I now require a full arrowhead design with a bottom border. As this involves rotating a div at a 45° angle, adding another border to either side will n ...