Tips for effortlessly enlarging an element

When you click on "#sidebarnav>li", the following happens:
1) The second child of it - <ul> element will expand and its class toggles between "collapse" and "collapse in".

2) "#sidebarnav>li" will receive the "active" class.

3) The "aria-expanded" attributes in the <a> and <ul> tags will become "true".

I have been trying to smoothly expand the ul elements when clicking on their parent, but I have not been successful. I attempted to add the style 

transition: height 500ms ease-in-out
to the class "collapse in", but it does not work. Can anyone help me with this issue? Check out the code on Fiddle

<!--language: lang-html-->
<nav class="sidebar-nav">
    <ul class="in" id="sidebarnav">
        <li> 
           <a class="has-arrow waves-effect waves-dark" aria-expanded="false" href="#">
              <span class="hide-menu">Dashboard</span>
           </a>
           <ul class="collapse" aria-expanded="false">
            <li><a href="index.html">Minimal </a></li>
            <li><a href="index2.html">Analytical</a></li>
            <li><a href="index3.html">Demographical</a></li>
            <li><a href="index4.html">Modern</a></li>
         </ul>
       </li>
    </ul>
 </nav>
javascriptjquerycss

Answer №1

Regrettably, it is not possible to animate the height property using percentage values. However, you can achieve a similar effect by utilizing the transform property.

If you require an "expansion" animation, you will need to employ JavaScript. Below is an example of how you can use the transform property:

Enclose the ul within a container:

<div class="expand-container">
  <ul class="expand" aria-expanded="false">
    [...]
  </ul>
</div>

Ensure that the overflow is hidden on the container to prevent overlap with the ul:

.expand-container {
  overflow: hidden;
}

Apply CSS transitions to the translateY property for the .in class:

.expand {
  transition: transform 250ms ease-in-out;
  transform: translateY(-100%);
}

.expand.in {
  transform: translateY(0%);
}

You can view a demonstration on this working Fiddle. (I modified the JS code to accommodate the container element)

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

Trigger the execution of a Python script through a webpage with just the click of a button

I have a small web interface where I need to control a Python script that is constantly gathering data from a sensor in a while loop. Ideally, I would like the ability to start and stop this script with the click of a button. While stopping the script is s ...

javascriptjquerypythonajax

Tips for Organizing a Vast Array of Repetitive "Nth-Of-Type" CSS Selectors

Imagine an array of vibrant highlights, all controlled through CSS. Is there a way to condense this extensive block of CSS code while achieving the same result? In simpler terms, is it possible to reduce the repetition in the code by using only CSS when ...

csscss-selectorscode-cleanupnon-repetitive

The ForEach function does not execute actions on every individual object, but rather only once

I am currently developing a Deck building application for a card game. In addition, I have set up a database to manage the cards that I sell and play with. The deck builder tool I created allows me to deplete the stock of sellable cards when adding them to ...

javascriptnode.jsloopsforeachasync-await

Automatically update data in Angular without the need to refresh the page

One feature of my application involves displaying a table with rows retrieved from a database. The functionality responsible for fetching this data is an AJAX call, implemented as follows: getPosts(): Observable<Posts[]> { return this.http.post ...

javascriptajaxangulartypescriptdynamic

AngularJS ng-repeat: displaying a list of filtered outcomes exclusively

I currently have a ng repeat that loops through a set of results. <a class="list-group-item" href="#trip/{{trip.id}}/overview" ng-repeat="trip in trips | filter:search | limitTo:-15"> Basically, as I enter more text into my input field, the list sh ...

javascriptangularjsangularjs-ng-repeat

Enhance the user experience by adding visual appeal to the first option in the selection form. Make it

Is there a way to change the color of the first option in the selection box to grey, similar to the example above? Additionally, how can I create a clickable icon that will display all options? The current setup is not functioning correctly. <div clas ...

htmlcssformsfont-awesome

Dynamically assigning a name to a variable through code

Is there a quicker way to complete these 100 tasks? variable_1 = 1; variable_2 = 2; variable_3 = 3; ... variable_100 = 100; I attempted to use the following code: for(var i = 1; i <= 100; i++) { variable_ + i = i; } However, I encountered an e ...

javascript

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor

Exploring the functionalities of using Script in Next.js 13

I want to include a vanilla JavaScript script in my next.js application like this: import Script from "next/script"; <Component {...pageProps} /> <Script id="raychat-widget" strategy="afterInteractive&quo ...

javascriptnext.jsnext.js13

Troubleshooting Date Errors in Typescript with VueJS

Encountering a peculiar issue with Typescript while attempting to instantiate a new Date object. <template> <div> Testing Date</div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: ...

javascripttypescriptdatevue.js

Invoke OnSelectedIndexChanged from GridView prior to any other function execution

In my scenario, there are two GridViews available. The first GridView allows the user to select a row, based on which a corresponding list will be displayed according to the selected GridView ID. First Grid: https://i.stack.imgur.com/d0OKq.png Second Gri ...

javascriptc#jqueryasp.netgridview

Utilizing v-model for dynamic binding within a v-for iteration

I'm currently working on binding v-model dynamically to an object property within an array of objects. I am unsure about how to accomplish this task. The objective is to choose a user using the Select HTML tag and then display the list of that user&ap ...

javascriptarraysvue.jsvuejs2v-model

Error: The function "execute" has not been declared

Hey there! I've created a Discord bot that is meant to check the status of a Minecraft server, but I'm encountering an issue with the embed. It's showing this error: UnhandledPromiseRejectionWarning: ReferenceError: execute is not defined. ...

javascriptnode.jsdiscorddiscord.jsbots

Arranging an array of arrays based on the mm/dd/yyyy date field

Currently, I am facing an issue while attempting to sort data obtained from an API by date in the client-side view. Here is an example of the data being received: address: "1212 Test Ave" address2: "" checkNumber : "" city: "La Grange" country: "" email: ...

javascriptarraysangulartypescriptsorting

data-cy appears in the DOM structure, yet remains unseen

I'm seeking some clarity on how to effectively use Cypress. While writing end-to-end tests, I encountered a failed test due to the element not being visible. A helpful answer I found assisted me in resolving this issue by clicking an element that was ...

javascripthtmlmaterial-uicypressregression-testing

What is the best method for distributing this array object?

I am faced with the task of spreading the following object: const info = [{ name: 'John', address: 'america', gender: 'Male', job: 'SE' }]; I want to spread this array object and achieve the following format: form:{ ...

javascriptreactjsspread

Utilize a Vue.js filter on the v-model within an input element

Seeking assistance! I successfully created a directive that wraps the Jasny Bootstrap Plugin, specifically focusing on the input mask feature! Additionally, I have developed a custom filter using moment to format date fields! The date format received fro ...

javascriptjquerydatemomentjsvue.js

Explore three stylish ways to showcase dynamic JavaScript content using CSS

Objective: For Value 1, the CSS class should be badge-primary For Value 2, the CSS class should be badge-secondary For all other values, use the CSS class badge-danger This functionality is implemented in the handleChange function. Issue: Current ...

javascriptcssreactjs

What steps are involved in bundling a Node project into a single file?

Recently, I've been using npm to create projects. When it comes to AMD, I find the native node require to be very convenient and effective for my needs. Currently, I rely on grunt-watchify to run my projects by specifying an entry file and an output f ...

javascriptnode.jsgruntjsnpmrequire

javascript close the current browser tab

Can someone please help me with a JavaScript code to close the current window? I have tried the following code but it does not seem to work: <input type="button" class="btn btn-success" style="font-weight: b ...

javascripthtml