Trouble keeping the rows and columns line up :(

HTML & CSS
18

I’ve come up with what is more proof of concept than polished code.
* the “resize” should be throttled or removed entirely. I added it because I got tired of reloading the page while testing

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Show Hide Content</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
* {
 outline: 1px solid #00f;
}
.shown {
 float: left;
 width: 200px;
}
.shown a, .hidden {
 display: block;
}
.revealed {
 clear: both;
 background-color: #def;
 font-size: 1.2em;
 color: #252;
}
.revealed b {
 font-size: 1.5em;
 color: #000;
}
</style>
</head>
<body>
<h1>Show Hide Content</h1>
<div id="main_content">
  <div class="shown one">
    <a href="" class="one">Cell One</a>
  </div>
  <div class="hidden one">
    <b>Content Cell One</b><br />
    Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell
  </div>
  <div class="shown two">
    <a href="" class="two">Cell Two</a>
  </div>
  <div class="hidden two">
    <b>Content Cell Two</b><br />
    Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell
  </div>
  <div class="shown three">
    <a href="" class="three">Cell Three</a>
  </div>
  <div class="hidden three">
    <b>Content Cell Three</b><br />
    Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell
  </div>
  <div class="shown four">
    <a href="" class="four">Cell Four</a>
  </div>
  <div class="hidden four">
    <b>Content Cell Four</b><br />
    Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell
  </div>
  <div class="shown five">
    <a href="" class="five">Cell Five</a>
  </div>
  <div class="hidden five">
    <b>Content Cell Five</b><br />
    Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell
  </div>
  <div class="shown six">
    <a href="" class="six">Cell Six</a>
  </div>
  <div class="hidden six">
    <b>Content Cell Six</b><br />
    Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell Content Cell
  </div>
</div>
<script type="application/javascript">
// script that needs the DOM to be loaded here
var main_content_div = document.getElementById('main_content');
var shown_divs = document.querySelectorAll('#main_content .shown');
var shown_divs_len = shown_divs.length;
var hidden_divs = document.querySelectorAll('#main_content .hidden');
var hidden_divs_len = hidden_divs.length;
/* hide hidden content */
for (var i = 0; i < hidden_divs_len; i++) {
  hidden_divs[i].style.display = "none";
}
function remove_current_revealed() {
  var revealed_divs = document.querySelectorAll('#main_content .revealed');
  for (var m = 0; m < revealed_divs.length; m++) {
   revealed_divs[m].parentNode.removeChild(revealed_divs[m]);
  }
}
function created_div(content) {
  var hidden_display_div = document.createElement('div');
  hidden_display_div.classList.add("revealed");
  hidden_display_div.innerHTML = content;
  return hidden_display_div;
}
function append_hidden_display_div(evt, content) {
  var main_content_div_offset_top = main_content_div.getBoundingClientRect().top;
  var revealed_div = document.querySelector('#main_content .revealed');
  var revealed_div_height = (revealed_div) ? revealed_div.clientHeight : 0;
  var revealed_div_offset_top = (revealed_div) ? revealed_div.getBoundingClientRect().top : 0;
  var item_offset_top = evt.target.getBoundingClientRect().top;
  if (item_offset_top > revealed_div_offset_top) { 
    item_offset_top = item_offset_top - revealed_div_height;
  } 
  var item_height = evt.target.clientHeight;
  var row_index = ((item_offset_top - main_content_div_offset_top) == 0) ? 0 : (item_offset_top - main_content_div_offset_top) / item_height;
//  console.log('row_index ' + row_index);
  var viewport_width = document.getElementsByTagName('body')[0].clientWidth;
  var items_width = viewport_width;
  if (shown_divs_len > 0) { 
    items_width = shown_divs[0].clientWidth;
  }
  var last_row_item = Math.floor(viewport_width / items_width);
  last_row_item = last_row_item * (row_index + 1);
  last_row_item = (last_row_item > shown_divs_len) ? shown_divs_len : last_row_item;
  remove_current_revealed();
  var hidden_display_div = created_div(content);
//  console.log('last_row_item ' + last_row_item);
  if ((typeof shown_divs[last_row_item] != "undefined") && (last_row_item < shown_divs_len) ){
    shown_divs[last_row_item].parentNode.insertBefore(hidden_display_div, shown_divs[last_row_item]);
  } else if (typeof shown_divs[last_row_item - 1] != "undefined") {
    shown_divs[last_row_item - 1].parentNode.appendChild(hidden_display_div);
  }
}
function show_hidden(evt) {
  evt.preventDefault();
  if (evt.target.tagName == 'B') { return; }
  if ( (evt.target.hasAttribute('class')) && (evt.target.getAttribute('class') == "revealed") ) { return; }
  var class_attr = evt.target.getAttribute('class');   
  var class_num = (class_attr) ? class_attr.replace(/(shown|hidden)/, "") : "";
  var hidden_div_content = "";
  for (var j = 0; j < hidden_divs_len; j++) {
    if (hidden_divs[j].getAttribute('class').indexOf(class_num) !== -1) {
      hidden_div_content = hidden_divs[j].innerHTML;
    }
  }  
  append_hidden_display_div(evt, hidden_div_content);
}
main_content_div.addEventListener('click', function(evt) { 
                                show_hidden(evt); });  
window.addEventListener('resize', function(evt) { 
                                remove_current_revealed(); });  
</script>
</body>
</html>
4 Likes