HTML & CSS3 Slide Down

Question

I have coded the following jQuery, that makes a div slide down when a link is clicked. Is it possible in pure css3 without jQuery?

http://jsbin.com/exakuj/5

HTML

<header>
  <h1>Heading</h1>
</header>
<section>
  <a href='#' id='click'>Lorem ipsum dolor sit amet, consectetur adipiscing elit vestibulum convallis.</a>
  <div id='show'></div>
</section>

jQuery

$('#click').click(function() {
$('#show').slideDown('slow', function() {
// Animation complete.
  });
});

@F4r-20 That question uses jQuery, which I would prefer not to use — Susan Robinson, Jun 02 '13 at 12:36
@SusanRobinson, I have updated my answer, tell me what else you want — Rohit Agrawal, Jun 02 '13 at 13:18

Rohit Agrawal · Answer 1 · 2013-06-02T13:18:27.370

1

DEMO FIDDLE WITHOUT JQUERY

here is the code -

html -

<label for="test1" class="test">Click Me ;)</label>
<input type="checkbox" id="test1"/>
<div class="test2">
    Yo!! you clicked it, now I am visible to you with a smooth animation
</div>

css-

.test{
    background: yellow;
    padding:10px;
    display:block;
    font-family: tahoma;
    text-align:center;
    width:100px;
    font-weight:bold;
    clear: both;
}
.test2{
    width:100px;
    height:0px;
    text-align:center;
    font-size:12px;
    font-family: tahoma;
    color:#fff;
    font-weight:bold;
    padding:10px;
    opacity:0;
    float:left;
    overflow:hidden;
    background:red;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
#test1:checked + .test2{
    height: 70px;
    opacity:1;
}
#test1{
    display:none;
}

edited Jun 02 '13 at 13:18

answered Jun 02 '13 at 12:34

Rohit Agrawal

5,372
5
19
30

3

That's not what I'm looking for – Susan Robinson Jun 02 '13 at 12:37
Nice use of a checkbox! – Dave Everitt Jan 07 '14 at 12:46
@RohitAgrawal - actually your example makes a pretty good pure CSS accordion menu: http://jsfiddle.net/C8Nn5/ if I could 'accept' this answer, I would! The only issue is the fixed height of the divs, as you can't transition to `height: auto;`. – Dave Everitt Jan 07 '14 at 13:46

score 1 · Answer 2 · answered Jun 02 '13 at 12:41

Yes, but you probably would want some javascript anyway.

#show {
   padding: 20px;
   background: #ccc;
   max-height:0;
   overflow:hidden;
   -webkit-transition:max-height 1s;
   -moz-transition:max-height 1s;
   transition:max-height 1s;
}

#show:target {
    max-height:1000px; /* you can't transistion to height:auto */
}

http://jsfiddle.net/richbradshaw/hgdrw/1/

There are a few things here:

the :target selector
The page will jump to the ID if you don't use JS to cancel that behaviour
The only way to close it is to change the URL so it doesn't include #show at the end

If I were doing this, I would use what I have here, but instead of the target selector, I'd add a class to #show called 'active' using JS, and change #show:target to #show.active.

http://jsfiddle.net/richbradshaw/hgdrw/2/

I'm using jQuery here because it's so simple,

The target selector isn't really great for use in practice in my experience.

score 0 · Answer 3 · answered Jan 09 '14 at 10:31

0

If it's helpful I've adapted Rohit's answer into an accordion menu inside a nav tag, each div with content: see this JSFiddle.

The fixed height of the divs is necessary for a pure CSS version, which is an issue - you can't use height: auto;.

answered Jan 09 '14 at 10:31

Dave Everitt

17,193
6
67
97

score 0 · Answer 4 · answered Mar 09 '15 at 10:53

0

You can get a similar feel to a slide transition by using the top padding/margin:

http://jsbin.com/bicoseroze/1/

answered Mar 09 '15 at 10:53

Ben Boyle

1,686
16
13

HTML & CSS3 Slide Down

4 Answers4