Html 仅使用css显示带有输入按钮的元素

我想在另一个部分上选中复选框时显示一个部分，并从顶部用动画显示它。我在另一节中有以下输入代码

对位平面
诺姆
对位平面

关于代码的一条建议：

<button className="btn-continue">
                    Contratar Plano
    <input type="checkbox" id="reveal-email" role="button"></input>
</button>

对位平面
诺姆
对位平面

这是一项经典的JS任务。使用onclick事件检查复选框是否已选中，然后将节从

display:none

更改为

display:block

。还添加onclick事件，以便触发JS

函数showSection（）{
var showSection=document.getElementById（“显示电子邮件”），
planSection=document.getElementById（“plan section”）；
如果（showSection.checked==true）{
planSection.style.display=“块”；
}否则{
planSection.style.display=“无”；
}
}

#平面图部分{
显示：无；
}

对位平面
诺姆
对位平面

为什么你只想使用CSS，根据你的描述，这是一个

经典的
JS任务？@Sergey-N13我认为只使用CSS会更简单，但也接受JS请注意
（或
）是一个自动关闭标记，没有相应的
标记。@DavidSaysRestatemonica是的，我修正了代码上的
是您要单击以显示下一个
的
？这是在它自己的父级
中的
，还是仅仅包装在你代码片段中
的兄弟级
中？即使你的anwser正在工作，也请尽力解释它为什么工作或者OP需要做什么。提供代码是一回事，让他们理解问题和解决方案才是出路。@tacoshy是的，我同意你的观点，解释比回答更可取。我已经更新了我的答案，并且我想建议您在下一个答案中避免在HTML中使用JS，因为许多新手开发人员可以像最佳实践一样获得JS。@Sergey-N13我尝试了您的代码，但出现错误“TypeError:无法读取null的属性'addEventListener'”@PaolaSantos您是否将此代码粘贴到页面的顶部或底部？如果将JS代码粘贴到页面顶部，则需要将此代码包装到窗口加载事件@Sergey-N13我修复了，但仍然不工作，该部分仍然不工作appear@tacshy我尝试了你的解决方案，但没有成功，我使用的是来自react的多步骤表单，有4个步骤，当我单击输入时，什么都没有发生