-2

I have a HTML paragraph that initially i want to be hidden.Later On a click event i want that to show or display where someother paragraph is present this time by hiding that.But when i am trying to set visibility property to hidden ,that time also paragraph is taking space and height ,width that i dont want ..

Here is the sample paragraph ..

<div id="TeamsDesc" style="visibility: hidden;">
            <p id="Billing" style="float:left;color: #666666; width:700px; font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold; border-right: thin dotted #666666; line-height: 18px;">

             Paragraph Contents

            </p>
</div>

If i am adding this at the end of the webpage that time it is increasing the height of the webpage that is not desired..

Superdrac
  • 1,208
  • 17
  • 29
user3664608
  • 333
  • 1
  • 3
  • 12
  • 4
    Oh, yay inline styles! Anyway, replace visibility: hidden; with display: none; – Kyle May 26 '14 at 10:22
  • 1
    please avoid using inline styles. it adds duplicate code, makes your code unreadable and difficult to work with for others. [Why Use CSS](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS) – T J May 26 '14 at 10:27

2 Answers2

3

Apply display:none instead of visibility:hidden

With visibility:hidden the element will not be visible, but it'll be rendered and it'll take up corresponding space, with display:none the element will be there in DOM , but won't be rendered at all and won't take up space.

Update as per comments

$('button').click(function(){
 $('#para1').hide();
 $('#Billing').show();
})
T J
  • 42,762
  • 13
  • 83
  • 138
  • How to show it on Button click by hiding other element .Please see my updated post – user3664608 May 26 '14 at 10:25
  • Do you want to show/hide it on click of a button..? not sure what exactly you want to do from question, can you make it more clear..? – T J May 26 '14 at 10:31
  • Yes i want to hide a paragraph with id "para1" and show this div "Billing" on button click.How to achieve this? – user3664608 May 26 '14 at 10:33
  • One Doubt sir How can i add this element to another div which has id of "#BodyDesc" because i want this hidden element to show at specific location which is defined in DIV – user3664608 May 26 '14 at 10:41
  • Which element, the paragraph `#para1` or the div `#billing`..? and when, on button click..? – T J May 26 '14 at 10:43
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/54432/discussion-between-user3664608-and-t-j). – user3664608 May 26 '14 at 10:44
1

You can use display:none instead of visibility: hidden if you do not want the element to take space when not shown. To show the element you will need to display:block

<div id="TeamsDesc" style="display: none;">
    <p id="Billing" style="float:left;color: #666666; width:700px; font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold; border-right: thin dotted #666666; line-height: 18px;">Paragraph Contents</p>
</div>

Some of possible values of display

display: none    
display: inline
display: block   
display: inline-block  
display: inherit

You can read more about display here

Adil
  • 146,340
  • 25
  • 209
  • 204