css - cssでボタンクリック時にdivを表示する

Question

私がやりたいのは、このページのように、クリックすると新しい div が表示される小さなボタンです。

http://www.ign.com/events/e3

赤い「View Schedule」ボタンをクリックすると。CSSとHTMLでこれを行う方法はありますか? またはJavascriptを使用する必要がありますか?

Answer 1

はい、クリック イベントは JavaScript です。CSS を使用して JavaScript なしでホバー イベントを行うことができますが、操作はマウスが相互作用している要素で行う必要があります。

#myDiv {
    background-color: blue;
}
#myDiv:hover {
    background-color: red;
}

jQueryをチェックしてください。あなたのタスクは非常に簡単に行うことができます:

$('#myButton').on('click', function() {
    $('#someOtherDiv').show();
}

Answer 2

多くの「セマンティック HTML」応答を取得する予定ですが、何でも構いません。HTML / CSSだけでこれを完全に行うことができます（キャッチ：IE9 +およびすべての実際のブラウザーでのみ機能します... IE8-、JSはそうです）。

HTML:

<label for="checkbox" id="checkboxLabel">Show More</label>
<input type="checkbox" id="checkbox" />
<div id="stuffToShow">
    Happy times
</div>

CSS:

#stuffToShow {
    display:none;
}

#checkbox {
    opacity:0.01;
}

#checkbox:checked + #stuffToShow {
    display:block;
}

その後、好きなようにスタイルを設定できlabelますcheckbox。これは、できること/すべきことの非常に単純化されたバージョンです。

編集 (2013-06-10)

誰もこれを基本的な JS で示したくないという理由だけで、昔ながらの HTML4 の方法で:

<a href="#" id="ShowDiv" onclick="showHideDiv('ShowMoreDiv');">Show More</a>
<div id="ShowMoreDiv">
    Boo
</>

そしてバニラJS：

function showHideDiv(div){
    var x = document.getElementById(div);

    if(x.style.display == 'none'){
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }

    return false;
}

私の意見では、これはやや非意味的です。なぜなら、あなたはどこにも行かないリンクを持っているからです。