Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob

I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibility:hidden.

Could someone please modify this pen for me so that the height transitions smoothly like in this example: http://jsfiddle.net/thechrisjordan/3Fc7D/23/

I have managed to achieve this in a different HTML structure (similar to the fiddle), but I am unable to make it work in this specific scenario.

(Ideally, the properties of the other divs should remain unchanged)

htmlcss

Answer №1

 #items-list {
    max-height: 0;
    transition: all .8s ease-out;
    overflow: hidden;
    background: #f5f5f5;
}

#menu:hover #items-list {
    max-height: 450px;
    transition: max-height 0.3s ease-in;
}

Tested and confirmed operational!

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

The div element is failing to adjust its height correctly to match its parent container

I'm struggling to make the red border that wraps around the text extend all the way to the bottom of its parent div. Setting the height to 100% isn't achieving the desired effect, as it needs to match the height of the image. Tip: Try resizing y ...

htmlcss

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...

javascriptcssframeworks

Managing ajax requests for lazy loading while scrolling through the middle of the window can be a challenging task. Here are some tips on

I have implemented Lazy loading in my Project. I found a reference at which explains how to make an ajax call after scrolling and image upload with slow mode without allowing scrolling until the loader is shown. The code snippet I am using is as follows: ...

javascriptjqueryhtmlajaxasp.net-mvc

How can I detect a change in user input using jQuery?

When utilizing jquery .oninput with an element, the event will trigger instantly whenever there is a change in the input value. In my scenario, it is necessary for me to validate the input value by calling the service immediately after any changes occur. ...

javascriptjqueryhtml

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

Having trouble with the PHP code for sending an email using a basic form

This is an example from my HTML page. <form method="POST" action="sm.php"> <p>Login</p><br /> Username: <input type="text" size="10" maxlength="50" name="un"> <br /> Password: <input type="text" size="10 ...

phphtml

What is the best way to expand the navigation bar: should I add a side div or incorporate a background image?

I am encountering two issues that I need help solving. My first problem involves stretching out the navigation bar to fill the height and length of the adjacent div (div#textarea) while also keeping the text of the menu centered within that div. The seco ...

htmlcss

The fundamental principle of starting with mobile design in Bootstrap

I'm struggling to understand the concept of "mobile first default behavior" in Bootstrap 3. If there is no breakpoint at 480px, how can Extra small devices be the default? I get that it applies to font sizes, but what about the grid system? How can I ...

csstwitter-bootstrap

How to Retrieve Element Property Values from the DOM with JavaScript

I am currently attempting to access the property of an element within my webpage. My main objective is to toggle a float property between left and right when a specific onClick event occurs. However, despite my efforts, I am facing challenges in even acces ...

javascriptcsselement

Guide on organizing items into rows with 3 columns through iteration

Click on the provided JSFiddle link to view a dropdown menu that filters items into categories. Each item is stored as an object in an array for its respective category. Currently, all items are displayed in one column and I want to divide them into three ...

javascriptjqueryhtmlcsstwitter-bootstrap

Could the issue lie with PHP or the caching system?

I'm encountering a frustrating issue with my simple test that I just can't seem to resolve. It seems like there's some sort of glitch involving images and PHP, as I can only display one image at a time. The script looks correct to me, so I&a ...

phphtml

Tips for repairing damaged HTML in React employ are:- Identify the issues

I've encountered a situation where I have HTML stored as a string. After subsetting the code, I end up with something like this: <div>loremlalal..<p>dsdM</p> - that's all How can I efficiently parse this HTML to get the correct ...

javascripthtmlreactjsnext.js

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

javascriptcssnode.jsnpmpackage

Designing versatile buttons with HTML

When accessing the website on a phone, I have trouble seeing and tapping on these two buttons because they are too far apart. I would like to change it so that once a file is selected, the 'choose file' button will be replaced by the upload butto ...

javascripthtmlcssbutton

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

The Problem Currently, I have a setup for an online store where the shopping cart can be viewed by hovering over a div in the navigation menu. In my previous prototype, the relationship between the shoppingTab div and the trolley div allowed the shopping ...

javascriptjqueryhtmlcss

Modifying the color of a placeholder in an HTML input using CSS

Version 4 of Chrome now supports the placeholder attribute on input[type=text] elements (and likely other browsers do too). Despite this, the following CSS code does not affect the color of the placeholder text: input[placeholder], [placeholder], *[pla ...

csshtmlplaceholderhtml-input

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

javascriptjqueryhtmlcssdrop-down-menu

Using JavaScript to inject PHP variables into multiple <span> elements

I have been searching for a similar query without any luck. Currently, I am attempting to display the number of Twitter/Facebook/RSS followers within a <span>....</span> in my sidebar. To retrieve the follower counts, I am using some PHP scrip ...

phpjqueryhtml

Exploring anchor elements within a div using Selenium in Python to extract URLs

Hey there, I'm currently attempting to iterate through anchor elements within a div and retrieve the links of these elements. <div class="List"> <a class="selected" href="link">text 1</a> <a ...

pythonhtmlseleniumselenium-webdriver

Style.css remains invisible to NetBeans

My webapp is built using Servlets and JSP. However, I am currently facing an issue with directing NetBeans to my style.css file. Whenever the stylesheet is placed in WEB-INF or META-INF or even outside them within the Web Pages directory, everything func ...

cssservlets