CSS Transitions

Question

I have created the jQuery Script below, But am having a few problems converting it to preferably only CSS using transitions. If anybody could help me, I'll be greatfull.

Explanation of the example below:
- When you click on the text box a empty div container drops down, but I am having a few problems with scripting it in just mainly CSS3 Transitions.

HTML:

<div class="div">
    <input type="text" class="textbox" id="textbox"/>
    <p>example</p>
</div>

CSS:

.textbox {width:300px;}
.div { width:300px; background-color:#f8f8f8; }
p {width:300px; height:300px; background-color: #f8f8f8;}

jQuery:

$("#textbox").click(function() {
    $("p").slideToggle();
});

Live demo: jsFiddle

When I click on the text box, the <p> tags slides up...there's no empty <div> that drops down. Unless I'm missing something... — David Hoerster
– David Hoerster, Commented Aug 19, 2012 at 21:07
Oh sorry, Yes there is a <p> inside the div, But I'm looking for it in mainly CSS Transitions — user1608656
– user1608656, Commented Aug 19, 2012 at 21:09

Joseph Silber · Accepted Answer · 2012-08-19 21:11:05Z

1

p {
    height: 0;
    overflow: hidden;
    transition: height .3s;
}
input:focus + p {
    height: 20px;
}

Here's your fiddle: http://jsfiddle.net/58VHE/33/ (click to focus on the input).

P.S. Don't forget the vendor prefixes. The fiddle uses -prefix-free to auto-add the vendor prefixes.

answered Aug 19, 2012 at 21:11

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1608656 Over a year ago

That is the part I am having trouble with, but thank you anyway

Joseph Silber Over a year ago

@user1608656 - Can you explain what trouble you're having? Does the fiddle work the way you intend it to? If not, what do you expect the result to be?

user1608656 Over a year ago

I am having trouble the vendor prefixes, and have tried scripting it, But have failed. - The result would be clicking on a text box and a div drops down, In CSS3 Transitions. - Just like the jQuery Demo, But in CSS3.

Joseph Silber Over a year ago

@user1608656 - This is exactly what happens in the fiddle I've linked to. It's all done in CSS3 - no JavaScript.

user1608656 Over a year ago

About the prefixes - Do I have to add that in my code if I save it as a .HTML file?

|

Collectives™ on Stack Overflow

CSS Transitions

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related