Conceptual view switching - Avoiding imperative code in beautiful declarative markup.

viewswitch.html

<section>
  <hgroup>
    <h1>Hello</h1>
    <h2>World!</h2>
  </hgroup>
  <nav>
    <ul>
      <li>Foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
  </nav>
  
  <article>
    <header>
      <h1>What ever</h1>
    </header>
    
    <placeholder-view id="someId" constraint="SomeType"></placeholder-view>
  </article>
  
</section>

<view id="view1" type="SomeType">
  <div>
    <p>My content here.</p>
  </div>
</view>

<view id="view2" type="SomeType">
  <div>
    <p>Separate content here.</p>
  </div>
</view>


<script>

new ViewSwitcher('#view1', {
  container: '#someId',
  
  visible: function () {
    // some conditional return true | false
  }
});
new ViewSwitcher('#view2', {
  container: '#someId',
  
  visible: function () {
    // some conditional return true | false
  }
});
</script>