How to make full width div appear under a grid item on click

0
votes

I'm trying to get a full width content box to appear underneath a grid item on click... I have it appearing when the grid is 4 wide, but because of the absolute positioning, it covers up items below it.

The behavior that I'm after is that it would move the other grid items below it down when a full width content box appears. I can't have it covering up any of the other grid items. Note that the height of the full-width content box would change based on the content length within it. 

.track-box, .content {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 5px;
}

.track-content {
  position: absolute;
  left: 0;
  max-width: 100%;
  padding: 20px;
  margin: 10px;
}

https://codepen.io/Finches/pen/XVgxEb

Any help on how to approach this? Thanks.

2
javascriptjquerycss
I've solved this problem on this page, in case you want to reverse engineer it. connexo.de/couponplatz.php - connexo
Would you consider using CSS Grid instead of flexbox? - sol
codepen.io/anon/pen/ypXGez - connexo

2 Answers

0
votes

One solution would be for you to toggle a class on the track-box-container div when the box is clicked. Then you could just set the height manually when that class is added or taken away.

See my codepen

This is the easiest way to do it without changing a lot of your code. The only issue is the height will need to be static instead of flexible.

Hope this helps.

0
votes

I made a solution that uses the dynamic height of the content boxes... this way the items in the grid will move down the proper amount no matter how small or large the content is in the content box and the content will fit in the content box properly. This would need refined a bit, but it seems to work fairly well. 

$('.track-box-container').click(function() {

  //Get height of content
  var height = $(this).find('.track-content').height() + 250;

  //Convert height to string
  var heightStr = height.toString();

  //Toggle height and content box display
  if ($(this).height() == 200) {
      $(this).animate({height: heightStr});
      $(this).find('.track-content').show();
    }
    else if ($(this).height() == heightStr) {
      $(this).find('.track-content').hide();
      $(this).animate({height: "200px"});
    }

});

https://codepen.io/Finches/pen/YYQdxz