How to make content within div to disappear without content space closing up? -- jquery

Question

I am messing around with a small div containing three p's. If the user clicks any of the p's they all disappear. There is a small button to readd the content. I'm looking for a way to remove the content without the div closing up.

Below is that I have.

<script>
    $(function () 
    {
        $("p, button").click(function () 
        {
           $("p").toggle();
        })
    });
</script>
<div id="blarg" class="blarg" style="visibility: visible;">
    <p class="test" style="display: block;">If you click on me, I will disappear.</p>
    <p class="test" style="display: block;">Click me away!</p>
    <p class="test" style="display: block;">Click me too!</p>
</div>
<button>Readd</button>

You can find the answer here http://stackoverflow.com/questions/9614622/equivalent-of-jquery-hide-to-set-visibility-hidden — Tommy Ivarsson, Jun 03 '14 at 18:54
So clicking a paragraph should remove only that paragraph, but what should clicking the button do? — j08691, Jun 03 '14 at 18:56
Clicking any of the p's should remove them all. Originally, I was testing to see if toggle would remove the content without removing the content space. I left the button there to put the content back. — CBC_NS, Jun 03 '14 at 18:58

Simcha Khabinsky · Accepted Answer · 2014-06-03T19:00:24.847

1

The css style visiblity can do this for you. You just need to set it to visibility:hidden like this:

$(function () 
{
     $("p, button").click(function () 
     {
         $(this).css("visibility","hidden");
     })

});

edited Jun 03 '14 at 19:00

answered Jun 03 '14 at 18:54

Simcha Khabinsky

1,970
2
19
34

1

By the same token you mentioned earlier... you are applying the style to all `p` – Adjit Jun 03 '14 at 18:59
Woops. Updated. Thanks. – Simcha Khabinsky Jun 03 '14 at 19:00

score 0 · Answer 2 · answered Jun 03 '14 at 18:53

0

Toggle is using "display", wich makes the item occupy space, I think you want to use visibility, wich does not affect layout, just it... visibility.

answered Jun 03 '14 at 18:53

miguel-svq

2,136
9
11

sir_thursday · Answer 3 · 2014-06-03T19:02:04.647

-1

Set visibility: hidden; on each of the p elements on click.

.hidden {
  visibility: hidden;
}

$("p, button").click(function () {
  $(this).toggleClass("hidden");
});

EDIT: Good catch guys... wrote that too fast.

edited Jun 03 '14 at 19:02

answered Jun 03 '14 at 18:52

sir_thursday

5,270
12
64
118

you can just do `$(this).toggleClass('hidden')` instead of an if-else – Adjit Jun 03 '14 at 18:57
This will make **all** of them disappear with one click. I think what you want to use inside of the `function` is `$(this)` – Simcha Khabinsky Jun 03 '14 at 18:57
1

@SimchaKhabinsky is right. Change `$('p')` to `$(this)` – Adjit Jun 03 '14 at 18:59

How to make content within div to disappear without content space closing up? -- jquery

3 Answers3