使用CSS定位元素

Question

我已经好好了解并找到了许多不同的方法来定位元素，但没有找到我想要做的事情。

基本上，我想通过使用复选框输入来切换<section>的显示。

我的HTML代码是......

<li><input type="checkbox" class="toggle" id="contacttog"><label for="contacttog">Contact</label></li>              
        </ul>
    </nav>
</header>
</div>
<div style="clear:both"></div>
<section class="hiddencontact" id="hiddencontact"></section>

所以我想使用输入来切换.hiddencontact

非常感谢任何帮助。我知道我可以轻松使用JS来做到这一点。 我试过了..

    input.toggle {
    display: none;
}
input.toggle + .hiddencontact {
    height: 200px; margin: .2rem; overflow: hidden;
}

input.toggle:checked .hiddencontact {
    display: block;
    min-height: 200px;
}

无济于事，显然