Question

I have a strange problem.

I am using toggle to show and hide content of a page. I change the visibility of the div element based on an onclick event in javascript and it works fine.

My problem is even though some content is hidden before onclick, space is allocated in the page and once click event occurs text appears in the space. If we click again the text disappears.

I want the space also to disappear otherwise it looks awkward. I will attached the image for further reference. Only javascript,css and php no jquery solutions please.

Answer 1

You should be using CSS display: none rather than visibility: hidden if that is what you are doing. visibility: hidden just makes an element invisible, but holds its place in the document, whereas display: none removes the item from the document flow altogether.