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

Saving HTML files can cause formatting issues

After creating a website with the web design tool "Nicepage", I noticed something strange. When visiting the site through this link: It appears to be working perfectly fine (please let me know if it isn't). The layout should resemble this image: htt ...

htmlcssweb

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

jquerycsscss-transitionsmodernizr

What is the best way to show and hide text by toggling a link instead of a button?

I need help with toggling between two different texts when a link is clicked. I know how to achieve this with a button in JQuery, but I'm not sure how to do it with a link. <h1>Queries and Responses</h1> <p>Query: What is the larges ...

javascriptjqueryhtml

Filling out the form will automatically direct you to the text input section

I'm trying to figure out if I can create an input box in HTML that directs the user to a specific HTML file based on the word they enter. For example, if they type "Doctor", it would redirect them to the page doctor.html. This is for a school project ...

javascripthtmlcssformsinput

Implementing WordPress link pagination for displaying only the next and previous buttons

I'm new to WP and need some guidance. I want to display a list of images in a post, with the ability for users to click next and previous to cycle through them like separate pages. To split the post into multiple pages, I added this code: <!- ...

phphtmlcsswordpress

What is the process for loading a PHP page dynamically within the <DIV> of another PHP page?

At this moment, I have two PHP pages named test1.php and test2.php. In the test1.php page, there are 2 DIVs: one labeled "SubmitDiv" and the other "DisplayDiv". Inside the SubmitDiv resides a Submit button. The desired functionality is that when a user cli ...

phpjqueryhtmlajax

Displaying a list within a circle that elegantly animates, and then, after two full rotations, magically morphs

Can icons be displayed in a circle and after 1,2 rotations, revert back to the list view? https://i.sstatic.net/p4Jxm.png If so, when it forms after 1,2 rotation, it should resemble a line. https://i.sstatic.net/uJW24.png In summary, looking for a CSS3 ...

jqueryhtmlcssanimation

What strategies can be implemented by web publishers to block Amazon Affiliate DEEP-LINKS from redirecting to the Amazon App?

Currently, I am utilizing the Amazon-India affiliate program as a way to generate income from my website. The issue arises when a visitor accesses my site using their mobile browser (specifically Google Chrome) and clicks on one of my affiliate links - ins ...

htmlgoogle-chromedeep-linking

Guide on transferring values from a Python list to an HTML progress bar

In my application, users can read news items and leave comments. These comments are then analyzed using NLP techniques to classify them as either positive or negative. My goal is to display the percentage of positive and negative comments for each news ite ...

pythonhtmlcssdjango

Customizable dropdown menu design using HTML and CSS

Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...

htmlcssdropdown

What is the reason that the values in the select option only appear once it has been clicked on?

After loading or reloading the page, I am experiencing an issue where the select options do not appear on the first click and the values are not displayed until the second click. Any assistance would be greatly appreciated! I am still new to coding, so ple ...

htmlangulartypescriptasp.net-corebootstrap-4

What could be the reason for the malfunction of my checkbox styling?

I have designed custom checkboxes and radio buttons with CSS styling as shown below: input[type="checkbox"]:checked + label:after, input[type="checkbox"][checked="checked"] + label:after, input[type="radio"][checked="checked"] + label:after, input[type="r ...

javascriptjqueryhtmlcssangularjs

The JSON ticker for BTC/LTC has stopped functioning

I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...

javascriptjqueryhtmljsonbitcoin

Choose a Different Value for Another HTML Element's Class

Is there a way to preselect an option on another page before it loads? Consider two pages, A and B. If a user clicks a button on page A, I want the default option on page B to be changed to "something" before redirecting them. How can this be achieved s ...

javascriptjqueryhtmlcss

Is it possible to animate the change in background color dynamically using jQuery?

I am struggling to implement a change/animate feature for the background color. When I place the background script within the form submit event but outside the ajax call, I can briefly see the color change. However, once the remote content loads, the colo ...

jquerycssajaxjquery-animate

Using PHP foreach loop to create bootstrap 4 cards

I am attempting to showcase all of my shop items on my webpage using Bootstrap 4 cards. I want them to be displayed in a grid format, three wide and however many deep (I may consider adding pagination later). Currently, I have a PHP foreach loop that succ ...

phpcssforeachdisplay

How can JavaScript be used to rearrange the placement of DOM elements?

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="boxes"> <div class="red" style="width: 300px; height: 300px; color: red"></div> <div class="blue ...

javascripthtmlcss

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

htmlcssresponsive-design

Need help with a countdown function that seems to be stuck in a loop after 12 seconds. Any

I am facing an issue with a PHP page that contains a lot of data and functions, causing it to take around 12 seconds to load whenever I navigate to that specific page. To alert the user about the loading time, I added the following code snippet. However, ...

javascripthtml

What is the best way to prevent HTML escaping in a HAML form?

I am facing an issue when I edit my HAML form as it renders the &ampersand; value in the text field. Even though I have set escape_html to true, it still displays the &ampersand; value. What could be the mistake on my end? Am I using the correct sy ...

htmlruby-on-railshaml