css - Div ターゲット/アクティブ トランジション

Question

クリックで div を展開することができず、ホバーを使用している場合にのみ機能します。div を a でラップしようとしましたが、ダイスはありませんでした。任意のヒント？

CSS

.membershipwrap {
    overflow: hidden;
    height: 50px;
    background: #dadada;
    width: 200px;
    -webkit-transition: all .3s linear .3s;
    -moz-transition: all .3s linear .3s;
    -ms-transition: all .3s linear .3s;
    -o-transition: all .3s linear .3s;
    transition: all .3s linear .3s;
}
.membershipwrap:hover {
    height: 150px;
}

HTML

<div class="membershipwrap">
  <p>Lorem Ipsum Test</a></p>
  <p>a;sdjf;jksdfkjas;dfj;safdj</p>
  <p>;klasdjf;kajs;dflklsafdj;kasjdfk;asjf</p>
  <p>;ksdjf;lkasdfjak;sdjfka;dfjs</p>
</div>

Answer 1

jqueryやjavascriptなしでこれを行う唯一の方法だと思います。

HTML

<!--// wrap the whole thing in an an a tag that points to an id on the div (can be anything) //-->
<a href="#random">
<div class="membershipwrap" id="random">
  <p>Lorem Ipsum Test</a></p>
  <p>a;sdjf;jksdfkjas;dfj;safdj</p>
  <p>;klasdjf;kajs;dflklsafdj;kasjdfk;asjf</p>
  <p>;ksdjf;lkasdfjak;sdjfka;dfjs</p>
</div>
</a>

CSS

    .membershipwrap {
    overflow: hidden;
    height: 50px;
    background: #dadada;
    width: 200px;
    -webkit-transition: all .3s linear .3s;
    -moz-transition: all .3s linear .3s;
    -ms-transition: all .3s linear .3s;
    -o-transition: all .3s linear .3s;
    transition: all .3s linear .3s;
}
/* add :target */
.membershipwrap:target {
    height: 150px;
}

デモ

または、クリックするたびに展開したり折りたたんだりしたい場合は、通常の昔ながらの JavaScript で行うことができます...

CSS

.expanded {
    height: 150px;
}

Javascript

var el = document.getElementById("wrap");
el.addEventListener('click', function(){
    if(this.className.indexOf('expanded') === -1){
        this.className += ' expanded';
    }
    else {
        this.className = 'membershipwrap'
    }
});

デモ

またはJQueryで...

JQuery

$('.membershipwrap').click(function(){
    $(this).toggleClass('expanded');
});

モアーデモ

Answer 2

:activedivのcssで指定します。クリックすると div が展開され、クリックされていないときは折りたたまれます。

.membershipwrap:active {
    height: 150px;
}