JSFiddle - React, Tailwind, and code Playground

by zoutepopcorn

HTML

<script src="http://listjs.com/no-cdn/list.js"></script>
<div id="hacker-list">
<input class="search" placeholder="Search" />

<ul class="list">
<li>
<a href="javascript:test();">
    <span class="linklist aanklik">
        <span class="image"></span>
        
        <span class="name">dummy</span>
    </span>
</a>    
</li>
    </ul>
</div>

CSS

html, body { 				
	margin: 0px 0px 0px 0px;
	overflow: hidden;
}
/* opmaak overlays */
#overlay, #opmaak{
	top: 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 998;
	background-color:#fff;
}

.overlay {
	top: 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 998;
	background-color:#fff;
}


ul {
	margin: 0;
	padding: 0;
	display: block;
}

ul > li {
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
	width: 100%;
	border-left:0;
}

ul li img {
	vertical-align: middle;
}



ul.accordion input[type='radio'], input[type='checkbox'] {
	display: none;
}

ul.accordion, ul.sublist {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  width:100%;
  height: !important;
	
}


a {
	text-decoration: none;
}

/* Style van de lijst */
.linklist {
	display:block;
	width:100%;
	height:100%;
	font-family: Helvetica, Arial, sans-serif;
	font-size:18px;
	line-height:48px;
	/* text-decoration:none; */
	border-bottom:1px solid #ccc;
	color:#555;
	padding-left:3px;
	padding-right:-80px;
	margin: 0;
	/*padding: 7px; */
} 

div.album {
    display:inline-block; 
    vertical-align:middle;
    width: 100%:
}



span.aanklik {
	width:100%;
}

/* WISSEL MENU */
/* Vinkje achter aanklik lijst */
span.aanklik:after {
	content:">";
	position:absolute;
	display: inline-block;
	right:15px;
	vertical-align:middle; 
	/*line-height: 4rem; */
}
/* Uitvouw menu selecter */
ul.accordion input[type='radio']:checked ~ label.test > span.linklist.aanklik:after {
        content:"V";
	position:absolute;
	right:15px;
}
/* Wissel menu, geef content weer */
ul.accordion input[type='radio']:checked ~ div.content {
	display: block;
	height: auto;
}

/* Naam wissel menu */
.content {
	display: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background:#fff;
	border-bottom: 1px #ccc solid;
	
}

/* Kleur labels style */
input.jq-ui-forms[type=checkbox] + label,input.jq-ui-forms[type=radio] + label { 
	position: relative;
	display:...

JavaScript

var options = {
    valueNames: ['uid','name', 'image']
};

var hackerList = new List('hacker-list', options);

// remove the first dummy... 
hackerList.remove( "name", 'dummy');

// add a friend.
hackerList.add( { uid: '1234', name: 'Marc', image: '<img id="test" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/202896_4_1782288297_q.jpg">' } );
hackerList.add( { uid: '1235', name: 'Bill', image:  '<img id="test" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash1/s48x48/373042_216311481960_1625208104_q.jpg">'} );

getUserName("1234");

function getUserName(uid) {
    var itemValues = hackerList.get("uid", uid)[0].values();

    console.log("The name of the user is: " + itemValues.name);
    // or use alert..
    //alert("The name of the user is: " + itemValues.name);
}