I'm using the follow code to make the display appear:
<div id="create_phase{{ forloop.counter }}" class="w3-modal" onclick="this.style.display='visible'">
and the follow code to hidden display:
<a onclick="document.getElementById('create_phase{{ forloop.counter }}').style.visibility = 'hidden'">X</a>
It works fine, but i can't make display appear again after hidden it.
Any suggestions?
Like Laif said in the comments, spaces in your IDs are not a good idea. I think the best solution is to use IDs with proper naming conventions that the DOM plays well with.
But a possible (hacky) solution could be prefacing the spaces in your getElementById call with \ to properly escape them.
Here's a CodePen: https://codepen.io/milofultz/pen/KKvGJbJ
You need to give your IDs proper names (cannot have spaces), as it is now, your div actually has 3 separate IDs.
and you need to change .style.visibility = 'visible', to .style.visibility = 'hidden' as your original code is not modifying the same style.
<div id="ele1" class="w3-modal" onclick="this.style.visibility='hidden'">
test
</div>
<a onclick="document.getElementById('ele1').style.visibility = 'visible'">X</a>Notice, in this snippet I had to reverse the way you were trying to hide and show content in the original, because a hidden element is not clickable, if you want to be able to click it. I would use opacity instead, like this:
<div id="ele1" class="w3-modal" onclick="this.style.opacity=100">
test
</div>
<a onclick="document.getElementById('ele1').style.opacity=0">X</a>