JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="idea-list-menu">  
    <div id="nav-wrapper">
    	<div id="grid-view" class="menu-item"><span>Grid View</span></div>
    	<div id="list-view" class="menu-item"><span>List View</span></div>
        <div id="random-list" class="menu-item"><span>Random</span></div>
	    <div id="most-recent-list" class="menu-item menu-item-selected"><span>Recent</span></div>
		<div id="most-active-list" class="menu-item"><span>Most Active</span></div>
		<div id="most-votes-list" class="menu-item"><span>Most Votes</span></div>
		<div id="most-favorited-list" class="menu-item"><span>Most Favorited</span></div>
		
        <div id="filter-toggle">Filter</div>
    </div>
    
    <div id="filterdrop">
        <div id="drop-wrapper">
        <div id="drop-header">
                <div class="drop-header-item"><span>Categories</span></div>
                <div class="drop-header-item"><span>Status</span></div>
                <div class="drop-header-item"><span>Tags</span></div>
        </div>
    	<div id="drop-content">
            <div id="categories" class="drop-col">
				<div id="category-container">
					<div class="category drop-item"><span>New Products</span></div>
					<div class="category drop-item"><span>Existing Products</span></div>
					<div class="category drop-item"><span>Process Improvement</span></div>
					<div class="category drop-item"><span>Patent</span></div>
					<div class="category drop-item"><span>Cost Savings</span></div>
					<div class="category drop-item"><span>Open Innovation</span></div>
                    <div class="category drop-item drop-item-empty"><span></span></div>
				</div>
			</div>
			<div id="status" class="drop-col">
				<div id="status-container">
					<div class="status drop-item"><span>Pending</span></div>
					<div class="status drop-item"><span>Under Review</span></div>
					<div class="status drop-item"><span>Under Consideration</span></div>
					<div class="status drop-item"><span>In Development</span></div>
					<div...

CSS

#idea-list-menu {color: #888888; font-weight: bold; font-family: arial;}
	#idea-list-menu #nav-wrapper {background:#e8e8e8;border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; font-size: 12px;width:100%;}
	#idea-list-menu .menu-item {display:inline-block;padding:15px 15px;margin-top:5px; margin-bottom:5px;}
	#idea-list-menu .menu-item:hover {background:#999999;color:#FFFFFF; border-radius: 4px; cursor:pointer;}
	#idea-list-menu .menu-item-selected {background:#999999;color:#FFFFFF; border-radius: 4px;}

	#idea-list-menu #filter-toggle { float: right; padding: 20px; cursor: pointer; }
	#idea-list-menu #filter-toggle:hover {background:#dfdfdf;}
	#idea-list-menu .filter-toggle-selected { float: right; padding: 15px; background:#dfdfdf;}

	#idea-list-menu #filterdrop {width:100%; display:none; position:relative;}
	
	#filterdrop #drop-header {float:left;border-bottom: 1px solid #ccc; width:100%;}
	#filterdrop .drop-header-item {float:left; padding-top:10px; padding-bottom:10px; font-size: 14px; width:160px;}
	#filterdrop .drop-header-item span {margin-left: 20px;}

	#filterdrop .drop-col {float:left;}
	#filterdrop #drop-content{width:100%;float:left;}	

	#filterdrop .drop-item { padding-top:10px; padding-bottom:10px; font-size:12px;border-right:1px solid #ccc;border-bottom:1px solid #ccc; width:160px;}
	#filterdrop .drop-item:hover {background: #eaeaea; cursor:pointer;}
	#filterdrop .drop-item.drop-item-selected {background: #eaeaea;}
	#filterdrop .drop-item-empty:hover {cursor:default; background: #dfdfdf;}
	#filterdrop .drop-item span {margin-left:20px;}

	#filterdrop #drop-footer {float:left;border-top: 1px solid #ccc; width:100%; margin-top: -1px; background: #eaeaea; height:50px;}
	#filterdrop #drop-footer a {margin: auto auto;}
	#filterdrop #drop-wrapper { background: #dfdfdf;border: 1px solid #ccc; position: absolute; width:100%; }

JavaScript

$('#filter-toggle').on('click', function(){
    $('#filterdrop').toggle();
    $(this).addClass('filter-toggle-selected');
});

$('.drop-item').on('click', function(){
    if(!$(this).hasClass('drop-item-empty')) {
        $(this).toggleClass('drop-item-selected');
    }
});

$('.menu-item').on('click', function(){
    if(!$(this).hasClass('menu-item-selected')) {
        $('.menu-item').removeClass('menu-item-selected');
        $(this).addClass('menu-item-selected');
    }
});