Question

I am having an issue with showing and hiding two divs. I have two links: “Write Post” and “Send Message.” For some reason, to get either div to appear I have to click the link twice. I thought it might be that I was attempting to click it before the page had been loaded, but that did not fix the issue. On page load, the divs are set to display:none and then I use JS to modify the style property. You can view the issue here

Here is my JavaScript code:

    <script type="text/javascript" />
    function showPost(id) {
if(document.getElementById('post').style.display == 'block' && id == 'send') {
    document.getElementById('post').style.display = 'none';
    document.getElementById(id).style.display = 'block';
}
else if(document.getElementById('send').style.display == 'block' && id == 'post') {
    document.getElementById('send').style.display = 'none';
    document.getElementById(id).style.display = 'block';
}
else if(document.getElementById(id).style.display == 'none') {
    document.getElementById(id).style.display = 'block';
}
else {
    document.getElementById(id).style.display = 'none';
}
    }
    </script>

Thanks!

Answer 1

The post and send elements don’t seem to have the style attribute on load. It doesn’t help to have the display:none in the css only, it needs to be applied to the element itself.

Adding style="display:none;" to both elements will solve your problem.

<div id="post" style="display: none;">
<div id="send" style="display: none;">