0

I made 4 boxes and want to hide the third one with jQuery. When I do that, the fourth one moves next to the second one, but that's not what I want. I want the fourth one to stay where it is. What should I do?

$('.list_ch3').click(function(){
     $('.list_ch3').hide('slow');
    });

.list {
    display:flex; flex-direction: 
}
.list li{
    list-style: none;
    background-color: pink; 
    color: white; 
    font-weight: 800;
    margin-left: 15px; 
    padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list" >
  <li class="list_ch1">list item 1</li>
  <li class="list_ch2">list item 2</li>
  <li class="list_ch3">list item 3</li>
  <li class="list_ch4">list item 4</li>
</ul>
Will Reese
  • 2,801
  • 2
  • 15
  • 27
dodo big
  • 1

2 Answers2

2

.hide() sets the css display: property to none, which makes the element disappear and not take up space.

If you want the element to be hidden, but still occupy space, set it's css visibility property to hidden:

$('.list_ch3').css({'visibility':'hidden'});

Example:

$('#foo').click(function(){
  $(this).css({'visibility' : 'hidden' });
});

$('#bar').click(function(){
  $(this).hide('slow');
});
div{
  height: 100px;
  width: 100px;
  background-color: steelblue;
  margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">Click: Visibility Hidden</div>
<div id="bar">Click: Display None</div>
<div id="baz">Baz</div>
wahwahwah
  • 3,254
  • 1
  • 21
  • 40
1

Try setting the visibility to hidden

$('.list_ch3').click(function(){
    $('.list_ch3').css({"visibility":"hidden"});
});

.hide() set display: none, which removes its space, visibility: hidden preserves the space

Update If you still want the fading effect, try this:

$('.list_ch3').click(function(){
    $('.list_ch3').animate({opacity:0}, 1000);
});

jsfiddle

Mindless
  • 2,352
  • 3
  • 27
  • 51
  • Just an FYI - "opacity" and "visibility" [aren't the same thing in css land](http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden) (which i just discovered as well). The primary difference is `opacity : 0` is still "tabable" and "clickable" whereas "hidden" is not. :) – wahwahwah May 15 '15 at 14:22