如何制作 <div> 消失然后重新出现onclick

Question

I'm trying to make a FAQ section for my website but I can't seem to get this simple code to work, I've been stomped for hours, I'm trying to make a box disappear onclick , then reappear. I've gotten it to disappear but when I add in the reappear the whole thing breaks. Here's my code:

 function showDiv() { document.getElementById('FAQPage').style.display = "block"; } function closeDiv() { document.getElementById('FAQPage').style.display = "none"; } function showOrHide() { if (document.getElementById('FAQPage').style.display = "block") { closeDiv() } else { showDiv() } } 

 #FAQPage { background-color: #F8F8F8; width: 50%; position: absolute; left: 41%; height: auto; top: 10%; display: none; } 

 <div id="FAQSidebar-buttons" onclick="showOrHide()"> <h2 align="center">What kind of websites can we do?</h2> </div> <div id="FAQPage"> <h1 align="center">What kind of websites can we do?</h1> <hr /> <p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! Here, no matter what kind of business you have, you can get a site for it.</p> </div> 

Answer 1

You have typo:

if(document.getElementById('FAQPage').style.display == "block") // double == should be used here

Updated Code :

 function showDiv() { document.getElementById('FAQPage').style.display = "block"; } function closeDiv() { document.getElementById('FAQPage').style.display = "none"; } function showOrHide() { if(document.getElementById('FAQPage').style.display == "block") { closeDiv() } else { showDiv() } } 

 #FAQPage{ background-color:#F8F8F8; width:50%; position:absolute; left:41%; height:auto; top:10%; display:none; } 

 <div id="FAQSidebar-buttons" onclick="showOrHide()"> <h2 align="center">What kind of websites can we do?</h2> </div> <div id="FAQPage"> <h1 align="center">What kind of websites can we do?</h1><hr /> <p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! Here, no matter what kind of business you have, you can get a site for it.</p> </div> 

PS: usually showOrHide is called toggle (ex: toggleVisibility)

Answer 2

You need to fix the = in your condition, use === instead, the first will assign, the second will check.

And instead of using document.getElementById each time, use a variable to store it to prevent querying the DOM each time.

 var faqPage = document.getElementById('FAQPage'); function showDiv() { faqPage.style.display = "block"; } function closeDiv() { faqPage.style.display = "none"; } function showOrHide() { if (faqPage.style.display === "block") { closeDiv() } else { showDiv() } } 

 #FAQPage { background-color: #F8F8F8; width: 50%; position: absolute; left: 41%; height: auto; top: 10%; display: none; } 

 <div id="FAQSidebar-buttons" onclick="showOrHide()"> <h2 align="center">What kind of websites can we do?</h2> </div> <div id="FAQPage"> <h1 align="center">What kind of websites can we do?</h1> <hr /> <p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! Here, no matter what kind of business you have, you can get a site for it.</p> </div> 

Answer 3

May be you need to change assignment operator to operator of equivalence

if(document.getElementById('FAQPage').style.display = "block") {

to:

if(document.getElementById('FAQPage').style.display == "block") {

Answer 4

Use a class for clarity like:

 function showOrHide(){ var faq = document.getElementById("FAQPage"); faq.classList.toggle("showed"); } 

 #FAQPage{ background-color:#F8F8F8; width:50%; position:absolute; left:41%; height:auto; top:10%; display: none } #FAQPage.showed{ display: block; } 

 <div id="FAQSidebar-buttons" onclick="showOrHide()"> <h2 align="center">What kind of websites can we do?</h2> </div> <div id="FAQPage"> <h1 align="center">What kind of websites can we do?</h1><hr /> <p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! Here, no matter what kind of business you have, you can get a site for it.</p> </div>