HTML5 loading a content into a main view wrapper?

Question

I am no stranger to front-end development, but I have come across a requirement by a client which I have never done before, and I would appreciate it if someone can point me int

Answer 1

Here's another suggestion, using CSS3 (I know this can be improved, but I'm just doing this quickly to give you the idea).

This assumes the content is already loaded. If you are loading through AJAX, I would do it differently.

HTML

  Content 1
  ...
  Content 7


  
content 1
  ...
  
content 7

CSS

#main-content-wrapper{ 
  max-height: 30em; /* arbitrary for example only */ 
  overflow:auto; /* scroll if over max-height */
}
#main-content-wrapper section:not(:first-child){ display:none; }
#main-content-wrapper section:target{ display:block; }

JavaScript (if you don't want the CSS3 :target - I haven't tested this)

var id = location.hash.replace('#','');
if( id.length > 0 ){
  var sections = document.getElementById('main-content-wrapper').getElementsByTagName('section');
  for( var i = sections.length-1; i >= 0; i-- ){
    sections[i].style.display = 'none';
  }
  document.getElementById(id).style.display = 'block';
}

JQuery version

if( location.hash.length > 0 ){
  $('#main-content-wrapper content').hide();
  $(location.hash).show();
}