CODEWITHSUNDEEP
jquerycsshtmlbootstrap-4
Anderson Koh
Anderson Koh

Reputation: 503

JQuery .hide & .show occupy space even is hide

<script async src="//jsfiddle.net/andersonkoh/y6s9esnh/2/embed/"></script>

As you can see, when I select request then .show my .request-row but it goes down and when I right click > Inspect in browser it show that .enquiry-row is hidden but occupy the space. How do I make it in the same line without pushing it go down?

Upvotes: 1

Views: 73

Answers (1)

Subash
Subash

Reputation: 816

You should hide this itself <div class="col col-6"> rather than hidding element which is inside the <div class="col col-6"><div id="enquiry-row" style="display:none;"></div></div>, in your case class="col col-6" this take the space of the element.

So it should like this <div class="col col-6" id="enquiry-row" style="display:none;"><div></div></div>.

Here is the JSFIDDLE

Upvotes: 1

Related Questions