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

Answer 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.