JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery-accordion.googlecode.com/svn/trunk/jquery.accordion.js"></script>
<h1 class="project-name">
    <a href="http://unwrongest.com/projects/accordion">Unwrongest - Jquery Accordion</a>
</h1>

<ul id="accordion">
    <li>
        <a href="#america">America</a>
        <ul>
            <li>
                <a href="#america-newyork">New York</a>
                <div>Information about New York</div>
            </li>
            <li>
                <a href="#america-sanfransisco">San Fransisco</a>
                <div>Information about San Fransisco</div>
            </li>
        </ul>
    </li>
    <li>
        <a href="#antarctica">Antarctica</a>
        <div>Information about Antarctica</div>
    </li>
    <li>
        <a href="#america">America</a>
        <ul>
            <li>
                <a href="#america-newyork">New York</a>
                <div>Information about New York</div>
            </li>
            <li>
                <a href="#america-sanfransisco">San Fransisco</a>
                <div>Information about San Fransisco</div>
            </li>
        </ul>
    </li>
    <li>
        <a href="#antarctica">Antarctica</a>
        <div>Information about Antarctica</div>
    </li>
</ul>

CSS

body { background: #0D1114; }
.project-name a { padding: 0; color: #3cf; text-transform: uppercase; font: bold 13px/30px 'Arial', 'sans-serif'; }

ul { border: 1px solid #eee; border-bottom: 0; }
li { background: #fff; border-bottom: 1px solid #eee; }
li li { background: #eee; }
a { padding: 0 10px; font: bold 13px/30px 'Arial', 'sans-serif'; color: #036; text-decoration: none; }
div { background: #333; padding: 10px; color: #eee; font: 11px Arial; }

JavaScript

$('#accordion').accordion();