JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="unstyled">
    <li class="sel"><a href="#">Seleccionar</a></li>
    <li><a href="#">Opcion 1</a></li>
    <li><a href="#">Opcion 2</a></li>
    <li><a href="#">Opcion 3</a></li>
</ul>

CSS

ul {
    text-decoration:none;
    padding:0;
    display:block;
}

ul li {
    display:none;
    background:#ccc;
    padding:10px 0px;
    border-bottom:1px solid #fff;
}

ul li:first-child {
    display:block;
}

ul li a {
    text-decoration:none;
    color:#fff;
    padding:5px 15px;
    text-transform:uppercase;
    font-weight:bold;
    font-size:18px;
    font-family:Arial;
    letter-spacing: 2px;
}

JavaScript

/* -----------------------  NOTE  ----------------------

El problema reside en que solo la funcion se me ejecuta una vez, es decir, primer click =  despliega, segundo click = cierra desplige. Y posteriormente no funciona la función, me gustaria que se pudiese desplegar y cerrar continuamente.

   -----------------------------------------------------  */

$('.unstyled').click(function(){
  $(this).children().not('.sel').toggle();
});