Question

CSS:

.comments{cursor:pointer;}
.hidediv{visibility:hidden;}

Html:

<span id="agreeComments" class="comments b">Comments</span><br /><br />
    <div id="divAgree" class="hidediv">
      <asp:PlaceHolder runat="server" ID="plcAgreements" ClientIDMode="Inherit" />
    </div>

jquery:

<script>
        $(document).ready(function () {
            $("#agreeComments").click(function () {
                if ($("#divAgree").is(":hidden")) {
                    $("#divAgree").slideDown("slow");
                } else {
                    $("#divAgree").slideUp("slow");
                    $("#plcAgreements").show();
                }
            }
            );
        });
    </script>

I am using the above code to hide and show a div using jquery. I have an asp placeholder control inside the div. I need to hide the div when loading the page and need to show or hide when the clicking the comments span. Div is getting hide but the problem is it occupies the space for the asp placeholder.

Answer 1

Change this

.hidediv{visibility:hidden;}

to

.hidediv{display:none;}

Because visibility:hidden; retains the width and height of the hidden elements while display:none; doesn’t.

Check this question for more info What is the difference between visibility:hidden and display:none?