assaassa assaassa - 5 months ago 15
HTML Question

How can I get Code 1, to act the same as Code 2?

http://testpageblog5678.blogspot.com/

My question, how come Code 1, when you click on it, it doesn't stay in place, but when you click on Code 2, it does stay in place. How can I get Code 1, to act the same as Code 2?

On Code 1, do you see how when you click on it, it all moves up, but Code 2, everything stays in place. How can I get Code 1 to act the same?

Code 1





<div style="width:596px" onclick="img=document.getElementById('myDiv8'); img.style.display='block';
this.style.display='none'">

<a style="cursor: pointer;display:inline-block; width: 596px; height: 74px; background-color:#000000; border: 5px solid #BF598E;"></a>
</div>

<div id="myDiv8" style="display: none;">

<div style="background-color:green; color:white; width: 606px; height:84px;">
</div>
</div>





Code 2





<div style="width:266px" onclick="myDiv=document.getElementById('myDiv'); myDiv.style.display='block'; this.style.display='none'">

<a style="cursor: pointer;display:inline-block; width: 256px; height: 256px; background-color:red; Border: 5px solid #BF598E;">
</a>
</div>

<div id="myDiv" style="display: none;">
<img src="https://i.imgur.com/M5VkVbK.png" style="width: 266px; height: 266px; " />
</div>




Answer

Set these elements to block (because you are setting the hidden elements to block) not inline-block.

<a style="cursor: pointer;display:block; width: 256px; height: 256px; background-color:red; Border: 5px solid #BF598E;">

and

<a style="cursor: pointer;display:block; width: 596px; height: 74px; background-color:#000000; border: 5px solid #BF598E;"></a>

However it's not very nice nice code at all, but I suppose it's just for prove of concept.

Comments