I would like to close one already open div and show another when I click a link

Question

I have this function that opens and closes a div when I click a link, and close it again on the next click on the same link. It works just fine.

But now I would like add another div that shows when page load, but close when I click the same link I use to open the first div. Is that possible to fix?

I have searched for simular function but I hav not find a one that does the job.

<SCRIPT LANGUAGE="JavaScript">
function lunchboxOpen(lunchID) {
document.getElementById('lunch_' + lunchID).style.display = "block";
document.getElementById('clasp_' + lunchID).innerHTML="<a href=\"javascript:lunchboxClose('" + lunchID + "');\">...show more...</a>";
}
function lunchboxClose(lunchID) {
document.getElementById('lunch_' + lunchID).style.display = "none";
document.getElementById('clasp_' + lunchID).innerHTML="<a href=\"javascript:lunchboxOpen('" + lunchID + "');\">...show more...</a>";
}
</script> 

<style type="text/css"> 
.clasp{text-align:center;}
.lunchbox{display:none;}
</style> 

<div id="clasp_1" class="clasp"><a href="javascript:lunchboxOpen('1');">...show more...</a></div>
<div id="lunch_1" class="lunchbox"> ... my content</div>

        <div id="my_new_div">This content should be seen when page loads but hidden after click on the link</div>

Answer 1

将此添加到您的函数：

document.getElementById('my_new_div').style.display = "none";