anchor.diff:      </div>
     </section>
   </div>', :html %>
  +        <div class="section-container accordion" data-section="accordion">
  +          <section>
  +            <p class="title" data-section-title><a href="#">Section 1</a></p>
  +            <div class="content" data-section-content>
  +              <p>Content of section 1.</p>
  +            </div>
  +          </section>
  +          <section>
  +            <p class="title" data-section-title><a href="#">Section 2</a></p>
  +            <div class="content" data-section-content>
  +              <p>Content of section 2.</p>
  +            </div>
  +          </section>
  +        </div>
   
           <h6>Tabs</h6>
           <p>Adding a <code>tabs</code> class to the section container will enable tabs on both small and large screens.</p>
  
positive.code:   </section>
  </div>', :html %>
  
          <h6>Vertical Tabs</h6>
          <p>Adding a <code>vertical-tabs</code> class to the section container and setting <code>data-section="vertical-tabs"</code> will enable tabs on both small and large screens.</p>
  
  
negative.code: </div>
  ', :html %>
  
          <div class="section-container horizontal-nav" data-section="horizontal-nav" data-options="one_up: false;">
            <section>
              <p class="title" data-section-title><a href="#">Section 1</a></p>
              <div class="content" data-section-content>
                <ul class="side-nav">
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Link 1</a></li>
                </ul>
              </div>
            </section>
            <section>
              <p class="title" data-section-title><a href="#">Section 2</a></p>
              <div class="content" data-section-content>
                <ul class="side-nav">
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Link 1</a></li>
                </ul>
              </div>
            </section>
          </div>
  
          <h6>Deep Linking</h6>
          <p>Set <code>deep-linking</code> to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching <code>data-slug</code> on the content section that the hash should point to, without the pound (&#35;) sign.</p>
  