CODEWITHSUNDEEP
javascriptjqueryhtmlcss
The-Arkanian
The-Arkanian

Reputation: 61

How to make element slide down from display:none?

I have an html tag, "loginBox" (<loginBox> ... </loginBox>) that drops down when a user selects an option. However, before that it is hidden with display:none. How can I make it drop down, considering that before I do that I have to declare it display:block and it will fully appear? The present code has it just appear and disappear, and it would look better with a slide-down effect.

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

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

Upvotes: 3

Views: 4797

Answers (3)

Mi-Creativity
Mi-Creativity

Reputation: 9664

Another Pure CSS solution using :checked pseudo selector for checkbox 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>

Upvotes: 1

LOTUSMS
LOTUSMS

Reputation: 10260

You can do this without jquery by making use of css transitions transition: all 0.5s ease-in-out;

See this DEMO

Upvotes: 2

Hemal
Hemal

Reputation: 3760

Is this what you want?

FIDDLE

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

Upvotes: 3

Related Questions