Demo of accordion-like behavior in JQuery

A trivial JQuery-based fiddle showing how nested lists can collapse and expand by clicking on elements in the outer list.

HTML

<p>Click on a country to see some states or provinces</p>
    <ul>
      <li><span class="country">M&eacute;xico</span>
        <div>
          <li>Chiapas</li>
          <li>Durango</li>
          <li>Hidalgo</li>
        </ul>
      </li>
      <li><span class="country">Pakistan</span>
        <ul>
          <li>&#x67e;&#x646;&#x62c;&#x627;&#x628;</li>
          <li>&#x633;&#x646;&#x62f;&#x6be;</li>
          <li>&#x628;&#x644;&#x648;&#x686;&#x633;&#x62a;&#x627;&#x646;</li>
        </ul>
      </li>
      <li><span class="country">Brasil</span>
        <ul>
          <li>Par&aacute;</li>
          <li>Sergipe</li>
          <li>Maranh&atilde;o</li>
        </ul>
      </li>
    </ul>

JavaScript

$("ul ul").hide("slow");
$(".country").click(function() {
    $("ul ul:not(:hidden)").hide("slow");
    $(this).next().show("slow");
});