JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<a href="#" class="more_link">More<small>▼</small></a>
<div class="more list" id="one" style="display:none">
     <a href="#">test</a> <span style="color:#329">|</span> <a href="#">test1</a> <span style="color:#169">|</span> <a href="#">test4</a>
</div>

JavaScript

$(".more_link").click(function(e) {
    $(this).next(".more").toggle();
    e.stopPropagation();
});
$(".more").click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $(".more").hide();
});