JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<h3>Book List</h3>
<p>Brute force all to have relevant="true"</p>
<ul id="booklist">
    <li relevant="true">Book 1</li>
    <li relevant="false">Book 1</li>
    <li relevant="true">Book 1</li>
    <li relevant="true">Book 1</li>
    <li relevant="false">Book 1</li>
    <li relevant="false">Book 1</li>
    <li relevant="false">Book 1</li>
    <li relevant="false">Book 1</li>
    <li relevant="false">Book 1</li>
    <li relevant="false">Book 1</li>
</ul>
<h3>Music List</h3>
<p>Toggle relevant</p>
<ul id="music">
    <li relevant="false">Music 1</li>
    <li relevant="true">Music 1</li>
    <li relevant="false">Music 1</li>
    <li relevant="false">Music 1</li>
    <li relevant="true">Music 1</li>
    <li relevant="false">Music 1</li>
    <li relevant="false">Music 1</li>
    <li relevant="true">Music 1</li>
    <li relevant="false">Music 1</li>
    <li relevant="false">Music 1</li>
</ul>

CSS

li[relevant=true] {
    color: red;
}
h3{
    margin-top: 10px;
    font-weight: bold;
}

JavaScript

jQuery.fn.toggleAttr = function(name, onValue, offValue, on) {
    function set($element, on) {
        var value = on ? onValue : offValue;
        return value == null ? $element.removeAttr(name) : $element.attr(name, value);
    }
    return on !== undefined ? set(this, on) : this.each(function(i, element) {
        var $element = $(element);
        set($element, $element.attr(name) !== onValue);
    });
};


jQuery('ul#booklist li').toggleAttr("relevant", "true", "false", true);
jQuery('ul#music li').toggleAttr("relevant", "true", "false");