What is the best way to animate an element to slide down when it is hidden with

I'm working on an html tag called "loginBox" (

<loginBox> ... </loginBox>
) that is initially hidden with display:none. When a user selects an option, I want it to smoothly slide down instead of just appearing and disappearing. How can I achieve this effect by first declaring it as display:block for it to fully appear?

The CSS


loginBox {
  background:#424242;
  font-size:16px;
  color:#DEDEDE;
  line-height:25px;
  width:335px;
  padding:15px;
  padding-left:50px;
  margin-top: 9px;
  padding-bottom:25px;
  overflow-y:hidden;
  display:block; 
}

.collapse { 
  display:none; 
}

The Javascript/jQuery


if ($(this).hasClass('selected')) {  // the element that needs to be selected
          $("loginBox").addClass('collapse')
         } else { /*select*/ 
          $("loginBox").removeClass("collapse"); 
        }
javascriptjqueryhtmlcss

Answer №1

Is this what you desire?

JSFIDDLE LINK

$(document).ready(function(){
    $("loginbox").addClass("collapse");
    $(":checkbox").change(function(){
        if($(this).is(":checked")){
        //$("loginBox").removeClass("collapse"); 
        $("loginBox").slideDown(); 
        }
        else
        {
            //$("loginBox").addClass("collapse"); 
            $("loginBox").slideUp(); 
        }
    });
});

Answer №2

It is possible to achieve this effect without jquery by utilizing css transitions such as 

transition: all 0.5s ease-in-out;

To see an example, check out this DEMO

Answer №3

Utilizing the power of Pure CSS, this solution employs the :checked pseudo-selector to control the behavior of a checkbox. Check out the implementation on JS Fiddle.

#slider {
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background-color:#090;
    color:white;
    width:300px;
    height:80px;
    max-height:0;
    overflow-y:hidden;
    margin-top:10px;
}
#toggle:checked ~ #slider {
    max-height: 80px;
}
<input id="toggle" type="checkbox"><label for="toggle">Show Me</label>
<div id="slider">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</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

How to use the sha512 hash function in Node.js for Angular2 and Ionic2 applications

I'm attempting to generate a SHA512 Hash in Angular2 (Ionic2) that matches the PHP function hash('sha512'). After trying out different modules like crypto-js, crypto, and js-sha512, I keep getting a different Hash compared to PHP. I even a ...

javascriptphpnode.js

Instructions on how to insert a hyperlink into the information within the generated div utilizing an API

Currently, I am fetching information from an API based on the user's input (zipcode). The data retrieved includes the name of the institution, address, and webpage. I've been trying to make the webpage link clickable by adding a hyperlink to the ...

javascriptjqueryajaxapi

Using Node.js, iterate over every key-value pair within a Redis hash data structure

I am currently navigating my way through the world of redis and node, attempting to iterate over some test hash keys that I have generated. My goal is to display the results on the screen. The expected output should look like this: { "aaData": [['Tim ...

javascriptnode.jsexpressredishogan.js

React's constructor being invoked twice

As a newcomer to react, I am in the process of developing a simple web application but encountering an issue. It seems like my Constructor is being called twice when I load a class component. Can anyone provide some assistance? Home.js import React from ...

javascriptreactjs

unable to format radio button list

Having trouble aligning the radiobutton list to the left of the label above. Here is the code snippet: <div style="border-radius: 10px;"> <div style="margin-bottom: 10px"></div> <asp:Panel ID="panel" runat="server"&g ...

htmlcssasp.netradiobuttonlist

Adjust the position of the object in relation to its current orientation

I am facing a challenge in moving an object upwards in relation to its current direction. I am working with a CubeGeometry that has a specific height, and my goal is to place an object at the top of it and have it rotate along with the cube. Simply adding ...

javascriptthree.js

React: Error - Unable to use this.setState as a function

When attempting to pass a value from the Child Class to the Parent Class and set it in the Parent's state, I encounter the following error: TypeError: this.setState is not a function Parent Class class Header extends React.Component { constr ...

javascriptjqueryreactjsreact-redux

Having trouble with loading JavaScript during ng build --prod process

The JavaScript file I'm using for multiple emails (multiple_emails.js plugin) works well with ng serve. Here is my code: (function( $ ){ $.fn.multiple_emails = function(options) { // Default options var defaults = { ...

javascripttypescript

Combine and blur multiple background images using CSS blending techniques

I am currently working on a website, which is just a demo built in ReactJS: The issue I'm facing is related to the background. The idea behind the app is simple - it consists of 4 parts, with the top part displaying weather information without a bac ...

htmlcssreactjsblurry

I cannot understand why I keep receiving <input type="email" value="required"> when all I want is <input type="email" value="" required>

Currently, I am working with PHP code and here is my complete PHP code: echo "<input type=\"email\" class=\"profil_input_text form-control\" name=\"user_email\" pattern=\"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(& ...

phphtmlinputrequired

Tips for closing process.stdin.on and then reopening it later

I've been facing a challenge with an exercise. In this exercise, the client will input a specific integer x, followed by x other y values separated by spaces. The output should be the sum of each y value, also separated by spaces. For example: Input: ...

javascriptnode.js

Problem with special characters in Localstorage for Internet Explorer 8

After developing a jQuery script that retrieves data from a service, stores it in local storage, and displays it on the page upon a specific event, I encountered an issue with displaying Chinese characters only on IE8+ browser. Unfortunately, IE is unabl ...

jqueryhtmlcharacter-encodinginternet-explorer-8

Strange flickering/visualization issue experienced with transparent MeshPhongMaterial in Three.JS

In my scene, I have a Mesh called cylinder: const cylinder = new Mesh( new CylinderGeometry(2, 2, 1, 32), new MeshPhongMaterial({ color: color, shininess: 32, opacity: 0, transparent: true, specular: 0xffff82, }), ); I made the ...

javascriptthree.js

Enrolling a new plugin into a software repository

I have 5 unique classes: ConfigManager ForestGenerator TreeCreator NodeModifier CustomPlugin My goal is to create an npm module using TypeScript that incorporates these classes. The main feature I want to implement is within the ConfigManager clas ...

javascripttypescript

Angular 8 implementation of a responsive readonly input text field styled with Bootstrap 4

I want to make the input text read-only using Bootstrap. After some research on the Bootstrap website, I discovered that the form-control-plaintext class can be used for this purpose. <input type="text" readonly class="form-control-plaintext" id="stat ...

htmlcssangulartwitter-bootstrapbootstrap-4

Gin and Golang: Implementing HTML files with CSS styling

I am still learning English, so please bear with me :) My issue is that when using Gin to load HTML, my HTML file contains an import (/stylesheet/index.css), but when I run my app with Gin, it gives an alert that the stylesheet file could not be loaded. ...

htmlcssgo

Discover the steps to traverse through directories and their numerous subdirectories (including a whopping 15000 subdirectories) with the help of the directory-tree

We are currently utilizing the directory-tree npm package to access and read through all directories and subdirectories, noting that there are as many as 15000 nested subdirectories. Code snippet in use: const dirTree = require("directory-tree"); const ...

javascriptnode.jsdirectory-treenode.js-fs

Is there a method to track changes in the DOM made by AngularJS?

I'm currently exploring ways to detect changes in the DOM caused by AngularJS using jQuery. Despite setting up AJAX and history change listeners, I am still unable to successfully capture these alterations. Is there a way to achieve this? ...

jqueryajaxangularjsdomhtml5-history

First time blur update unique to each user

By using ng-model-options="{ updateOn: 'blur' }", I can delay model updating until the user clicks out of an input field. This helps prevent constantly changing validation states while initially entering data. However, if a user revisits a field ...

javascriptangularjs

Use a for loop to iterate through elements and retrieve input values using getElementById()

As I work through a for loop in JavaScript, I am utilizing the getElementById() method to fetch multiple input values. To begin, I dynamically created various input boxes and assigned distinct id's using a for loop. Subsequently, I am employing anoth ...

javascripthtmlloopsgetelementbyid