JSFiddle - React, Tailwind, and code Playground

by Pavel Mareš

HTML

<input type="checkbox" class="zobrazitme" data-search="Martin">Zobrazit jen zprávy, kde je @Martin

<div class="chat-buble">
Adam: @Martin: Ahoj Jano
</div>

<div class="chat-buble">
Erika: @Petr: Ahoj Martine
</div>
<div class="chat-buble">
Erika: @Jirka: Ahoj Jirko
</div>
<div class="chat-buble">
Adam: @Martin: 1
</div>
<div class="chat-buble">
Adam: @Martin: 2
</div>

CSS

.hide { display: none; }

JavaScript

jQuery('.zobrazitme').on('click',function(e){
		if( ! jQuery(this).is(':checked') ) {
    	jQuery('.chat-buble').removeClass( 'hide' );
    } else {
    	var name = jQuery(this).attr( 'data-search' );

      jQuery('.chat-buble').each(function( index ) {
        var massageContent = jQuery(this).html();

        if( ! massageContent.includes( name ) ) {
          jQuery(this).addClass('hide');
        }
      });
    }
});