JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div class="selection-group">
    <input type="radio" name="check" value="-1" checked="checked"/>Show All<br/>
    <input type="radio" name="check" value="1" checked="checked"/>With No Links<br/>
    <input type="radio" name="check" value="2"/>With Links
</div>

<div class="container"><div class="me">10/16/2014 14:36:11 - To: Ryan XXXX</div><div class="message">Fuerit toto in consulatu sine provincia, cui fuerit, decreta provincia.</div></div>

<div class="container"><div class="from">10/16/2014 14:21:41 - From: Henry XXX</div><div class="message">quos imitatae matronae complures opertis capitibus et basternis.</div><br/><div class="attachment"><a href="http://i.stack.imgur.com/jdYSW.jpg"><img src="http://i.stack.imgur.com/jdYSW.jpg"/></a></div></div>

CSS

.container {
    border: 1px solid;
    margin: 10px 0;
}

JavaScript

//Hide all containers that have links (display only that don't have links)
$(".container").filter(function() {
    return  $(this).find('a[href]').length && $(this)
}).hide();
//Radio buttons - onchange
$(".selection-group").on("change", ":radio", function() {
    //Grab the checked value
    var checkedVal = parseInt($(this).filter(":checked").val(), 10);
    //Hide all containers, filter based on radio selection
    $(".container").hide().filter(function() {
        if (checkedVal === 2) {
            //display all containers that have links in them
            return  $(this).find('a[href]').length && $(this)
        } else if (checkedVal === 1) {
            //display all containers that have no links in them
            return $(this).find('a[href]').length <= 0 && $(this)
        } else {
            //Display all
            return $(this)
        }
    }).show();
});