{% extends 'layout-unfold2.html' %}

{% block unfold_main %}

{% insert_str prelude "css/sample.css" %}

<!--<div id='scrolls' data-spy="scroll" data-target=".foo">-->
<div id='scrollDiv1'> <p class='well'><code>This scroll view was an attempt to use the scrollspy widget from bootstrap, but I could not get this to work quite obviously</code></p>
 {{ lorem }} {{ lorem }} {{ lorem }} </div>
<div id='scrollDiv2'> scroll2 area {{ lorem }} {{ lorem }} </div>
<div id='scrollDiv3'> scroll3 area {{ lorem }}  </div>
<div id='scrollDiv4'> scroll4 area {{ lorem }} {{ lorem }} {{ lorem }} </div>
<!--</div>-->
{% endblock unfold_main %}

{% block unfold_margin %}
<div class="foo">
<ul class="nav nav-tabs nav-stacked">
  <li><a href="#scrollDiv1" data-toggle="tab"><!--<i class="icon-chevron-right"/>--> scroll1 </a></li>
  <li><a href="#scrollDiv2" data-toggle="tab"> scroll2 </a></li>
  <li><a href="#scrollDiv3" data-toggle="tab"> scroll3 </a></li>
  <li><a href="#scrollDiv4" data-toggle="tab"> scroll4 </a></li>
</ul>
</div>
{% endblock unfold_margin %}