切换显示与JavaScript的div。开始隐藏，点击显示 [英] toggle reveal div with javascript. Start hidden, click to reveal

问题描述

我想切换是否可以使用按钮来隐藏/显示点击div。

I would like to toggle whether a div is visible using a button to hide/reveal the div on click.

我有这样做的代码，但div在默认情况下在页面加载时可见。我想让div开始隐藏，只有在观看者点击时才会显示。

I have code which will do this, but the div is visible on page load by default. I'd like the div to start hidden and only be revealed when the viewer clicks.

这是我目前使用的代码。有没有办法改变这种情况，因此div开始隐藏？

Here is the code I am using currently. Is there a way to change this so the div starts hidden?

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<button onclick="myFunction()">Enquire Now &gt;</button>
<div id="myDIV">
    <form action="/post.php" method="post">
        <p>Enter your contact details</p>
        <p>
        Name: <input type="text" name="name"><br>
        Tel: <input type="tel" name="tel"><br>
        Email: <input type="email" name="email" value="Email Address"></p>

        <p><input type="submit"></p>
    </form>
</div>

推荐答案

更改

Change

<div id="myDIV">

至

<div id="myDIV" style="display: none;">

这篇关于切换显示与JavaScript的div。开始隐藏，点击显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！