Below is a summarized version of my code:
HTML
<a onclick="showHideDiv('bio')" target='_self'>
bio
<div id="bio" class="shadowScreen" style="display: none;">
<p class="showBio">
Bio!
</p>
</div>
</a>
Javascript:
var curDiv;
function showHideDiv(id){
if (curDiv!==null){
document.getElementById(curDiv).style.display="none";
}
document.getElementById(id).style.display="inline";
curDiv=id;
}
CSS:
.shadowScreen{
-moz-box-shadow: 0 0 30px 5px;
-webkit-box-shadow: 0 0 30px 5px;
}
.showBio{
background-color: white;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
When the 'a' element is clicked, it should trigger the "showDiv(div)" function in JavaScript, changing the display property from "none" to "inline". The HTML contains a 'div' element with the "shadowScreen" class that darkens the screen. Inside this div, there's a 'p' element that centers a box on the screen displaying "bio!". However, it's currently not functioning as intended and I'm having trouble debugging it using Netbeans. Any assistance would be greatly appreciated!
If you have any questions or need further clarification, please don't hesitate to ask!