Toggles not working when following Docs

Hi-

I'm trying to make use of Toggles (and Tabs) in a project. When following the docs as listed, the code is not working/rendering as expected.

http://docs.semicolonweb.com/docs/shortcodes/toggles/

Specifically, this code breaks

<div class="toggle">
	<div class="togglet"><i class="toggle-closed icon-ok-circle"></i><i class="toggle-open icon-remove-circle"></i>This is a Toggle Title</div>
	<div class="togglec">This is a Toggle Content</div>
</div>

HOWEVER, when I follow the format of code as built on your FAQ pages in your demo, the toggles work as expected.

http://themes.semicolonweb.com/html/canvas/faqs.html

<div class="toggle faq faq-marketplace faq-authors">
	<div class="toggle-header">
		<div class="toggle-icon">
			<i class="toggle-closed icon-question-sign"></i>
			<i class="toggle-open icon-question-sign"></i>
		</div>
		<div class="toggle-title">
			How do I become an author?
		</div>
	</div>
	<div class="toggle-content">Lorem ipsum dolor sit amet...</div>
</div>

Why is there a difference in the format of the HTML between the docs and the exmaples.