hide html elements but keep them part of isotope

Question

I have elements(divs) in jquery that have display none. They are still given space in the fitting. I now I can filter them out, but that seems to have other consequences

I guess it would help to state what I am attempting to do. I want to display an alternative div on hover. This works except for the space given to the

display: none

divs

enter image description here

on hover

enter image description here

here is my code if it helps

html

 <div id="item-container">
 @for (int i = 0; i < 20; i++)
 {
     <div class="item">@i</div>
     <div class="secondary">@i test</div>
 }
 </div>

css

#item-container .item {
  height: 40px;
  width: 40px;
  border: 1px solid red;
  background-color: grey;
}

#item-container .item:hover {
  z-index: 0;
}

#item-container .item:hover + .secondary {
  display: block !important;
  z-index: 1;
  margin-left: -11.2%;
}

#item-container .secondary {
  height: 40px;
  width: 40px;
  border: 1px solid blue;
  background-color: yellow;
  display: none;
}

score 0 · Accepted Answer · answered Jul 24 '13 at 21:03

one obvious way to get around this is do a parent div that holds both divs that I want to toggle between

instead of

<div></div>
<div></div>

do

<div>
    <div></div>
    <div></div>
</div>

than attach the isotope to the parent container. no need to change style except for the margin portion if you want them to be appear over the other space

hide html elements but keep them part of isotope

1 Answers1