CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Akinwunmi
Akinwunmi

Reputation: 27

Is there a way to let divs float left and right from an expanding div?

I'm building a website that shows many divs floating next and underneath eachother. When clicking on a div, the div expands and shows its content.

What I'm trying to do is letting all the other divs float around the expanded div, but now they will only float on the right side (because one object in a row is expanded and pushes the rest to the right and down).

Is there a way to solve this through css or javascript?

I implemented float:left and display:inline-block, but these functions obviously can't understand to move to the left of an expanding div. Also different positions didn't work, what could I do to solve/complete this?

$('.toggle-cells-one').click(function() {
  var toggleHeight = $(this).height() == 80 ? "181px" : "80px";
  $(this).animate({
    height: toggleHeight
  });
});

$('.toggle-cells-two').click(function() {
  var toggleHeight = $(this).height() == 80 ? "282px" : "80px";
  $(this).animate({
    height: toggleHeight
  });
});

$(".alg").on("click", function() {
  $(".alg-sub").toggle();
});
$(".cam").on("click", function() {
  $(".cam-sub").toggle();
});
$(".con").on("click", function() {
  $(".con-sub").toggle();
});
$(".dji").on("click", function() {
  $(".dji-sub").toggle();
});
$(".eth").on("click", function() {
  $(".eth-sub").toggle();
});
.country-wrap {
  position: relative;
  display: inline-block;
  float: left;
  width: 90px;
  height: 80px;
  margin: -1px -1px 0 0;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
  text-align: center;
  vertical-align: top;
  font-size: 18px;
}


/*.country-wrap:hover {
  width: 201px;
}*/

.country-content {
  display: none;
  margin-top: 15px;
}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div class="countries">
  <div class="country-wrap toggle-cells-one alg">
    <img src="image0100.svg"><br> ALG
    <div class="country-content alg-sub">
      <img src="image0101.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one cam">
    <img src="image0200.svg"><br> ALG
    <div class="country-content cam-sub">
      <img src="image0201.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one con">
    <img src="image0300.svg"><br> ALG
    <div class="country-content con-sub">
      <img src="image0301.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one dji">
    <img src="image0400.svg"><br> ALG
    <div class="country-content dji-sub">
      <img src="image0401.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one eth">
    <img src="image0500.svg"><br> ALG
    <div class="country-content eth-sub">
      <img src="image0501.svg"><br> KAB
    </div>
  </div>
</div>

Upvotes: 1

Views: 113

Answers (1)

silentw
silentw

Reputation: 4885

Take a look at masonry:

$('.toggle-cells-one').click(function() {
  var toggleHeight = $(this).height() == 80 ? "181px" : "80px";
  $(this).animate({
    height: toggleHeight
  }, 400, 'swing', function() {
    // when the animation ends, trigger layout re-calculation
    $('.countries').masonry('layout');
  });
});

$('.toggle-cells-two').click(function() {
  var toggleHeight = $(this).height() == 80 ? "282px" : "80px";
  $(this).animate({
    height: toggleHeight
  });
});

$(".alg").on("click", function() {
  $(".alg-sub").toggle();
});
$(".cam").on("click", function() {
  $(".cam-sub").toggle();
});
$(".con").on("click", function() {
  $(".con-sub").toggle();
});
$(".dji").on("click", function() {
  $(".dji-sub").toggle();
});
$(".eth").on("click", function() {
  $(".eth-sub").toggle();
});

// create the masonry layout
$('.countries').masonry({
  itemSelector: 'div.country-wrap'
});
.country-wrap {
  position: relative;
  display: inline-block;
  float: left;
  width: 90px;
  height: 80px;
  margin: -1px -1px 0 0;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
  text-align: center;
  vertical-align: top;
  font-size: 18px;
}


/*.country-wrap:hover {
  width: 201px;
}*/

.country-content {
  display: none;
  margin-top: 15px;
}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="countries">
  <div class="country-wrap toggle-cells-one alg">
    <img src="image0100.svg"><br> ALG
    <div class="country-content alg-sub">
      <img src="image0101.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one cam">
    <img src="image0200.svg"><br> ALG
    <div class="country-content cam-sub">
      <img src="image0201.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one con">
    <img src="image0300.svg"><br> ALG
    <div class="country-content con-sub">
      <img src="image0301.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one dji">
    <img src="image0400.svg"><br> ALG
    <div class="country-content dji-sub">
      <img src="image0401.svg"><br> KAB
    </div>
  </div>
  <div class="country-wrap toggle-cells-one eth">
    <img src="image0500.svg"><br> ALG
    <div class="country-content eth-sub">
      <img src="image0501.svg"><br> KAB
    </div>
  </div>
</div>

Upvotes: 3

Related Questions