jquery - HTML & CSS3 スライドダウン

Question

リンクをクリックするとdivがスライドダウンする次のjQueryをコーディングしました。jQueryなしで純粋なcss3で可能ですか?

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.
  });
});

Answer 1

JQUERY を使用しないデモ フィドル

ここにコードがあります -

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;
}

Answer 2

はい、しかし、とにかく JavaScript が必要になるでしょう。

#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/

ここにはいくつかのことがあります：

1. :target セレクター
2. JSを使用してその動作をキャンセルしない場合、ページはIDにジャンプします
3. 閉じる唯一の方法は、URL を変更して末尾に #show を含めないようにすることです

これを行う場合、ここにあるものを使用しますが、ターゲットセレクターの代わりに、JS を使用して「アクティブ」というクラスを #show に追加し#show:target、#show.active.

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

ここでは jQuery を使用しています。

私の経験では、ターゲットセレクターは実際に使用するにはあまり適していません。

Answer 3

上部のパディング/マージンを使用して、スライド トランジションと同様の感覚を得ることができます。

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