JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<ul>
    <li>
    <div class="navicon">
		G
	</div>
	<div class="contnavicon">
		<ul>
			<script>document.write('<input title="%item-name%" onClick="this.select()" type="text" value="', location.protocol, '//', location.host, '%folder%%item-name%" />')</script>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</li>
    <li>
    <div class="navicon">
		G
	</div>
	<div class="contnavicon">
		<ul>
			<script>document.write('<input title="%item-name%" onClick="this.select()" type="text" value="', location.protocol, '//', location.host, '%folder%%item-name%" />')</script>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</li>
    <li>
    <div class="navicon">
G
	</div>
	<div class="contnavicon">
		<ul>
			<script>document.write('<input title="%item-name%" onClick="this.select()" type="text" value="', location.protocol, '//', location.host, '%folder%%item-name%" />')</script>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</li>
    <li>
    <div class="navicon">
		G
	</div>
	<div class="contnavicon">
		<ul>
			<script>document.write('<input title="%item-name%" onClick="this.select()" type="text" value="', location.protocol, '//', location.host, '%folder%%item-name%" />')</script>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</li>
</ul>

CSS

ul{list-style:none;margin:0;padding:0;}
.contnavicon{display:none;}

JavaScript

$('.navicon').click(function(e){
    e.preventDefault();
    var curBlock = $(this).siblings('.contnavicon');
    $('.contnavicon').not(curBlock).hide();
    curBlock.fadeToggle('fast');
});