JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<section id="browse_by">
    <p>Clicking should toggle the on and off color states</p>
    <ul>
        <li id="toggle_company">
            <div id="div_company">COMPANY</div>
        </li>
        <li id="toggle_phone">
            <div id="div_phone">PHONE</div>
        </li>
    </ul>
</section>

CSS

ul > li {
    list-style:none;
    float: left;
}

p { font-family:Arial; font-size:11px; }

div {
    width: 100px;
    height: 100px;
    font-family: Arial;
    font-size: 12px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}

#div_company {
    background: #F37B21;
}

#div_phone {
    background: #3DB54A; 
}

JavaScript

var wireSearchIcons = function() {

	// Flags
	var company = true;
	var phone = true;

	var orange_on = '#F37B21'; var orange_off = '#f3cdb1';
	var green_on = '#3DB54A';  var green_off = '#d8e0c3';

	// Toggle Button States
	$("#toggle_company").unbind('click').bind('click', function () {
		company = setupToggleButtons(company, '#div_company', orange_on, orange_off);
	});
	$("#toggle_phone").unbind('click').bind('click', function () {
		phone = setupToggleButtons(phone, '#div_phone', green_on, green_off);
	});

	function setupToggleButtons(bool, path, on, off) {
		var path = $(path);
		if (bool) {
			path.css('background', off);
			bool = false;
		} else {
			path.css('background', on);
			bool = true;
		}

		return bool;
	}
}

wireSearchIcons();