JSFiddle - React, Tailwind, and code Playground

by VanessaKing

HTML

<!-- Page #1 -->
<div data-role="page" id="p1">
	
<!-- Panel start -->   

  <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
		<div data-role="header">
			<h1>Menu</h1>
		</div>		
		<form>
		    <fieldset data-role="collapsible">
		        <legend>Søg</legend>
		        	<div class="tags">
		        	<label for="textinput-f">Vælg Virksomheder:</label>
		        	
		            <input type="checkbox" name="checkbox-1-a" id="it" rel="it" class="tagsinput">
		            <label for="it">It</label>
		            
		            <input type="checkbox" name="checkbox-2-a" id="maskin" rel="maskin"class="tagsinput">
		            <label for="maskin">Maskin</label>
		            
		            <input type="checkbox" name="checkbox-3-a" id="design" rel="design"class="tagsinput">
		            <label for="design">Design</label>
		            
		            <input type="checkbox" name="checkbox-4-a" id="elektro" rel="elektro"class="tagsinput">
		            <label for="elektro">Elektro</label>
		            </div>
		    </fieldset>
		</form>
 </div>
<!-- /panel -->

    
    <!-- header -->
    <div data-role="header" style="position:fixed; z-index:+10; width:100%;"><a href="#mypanel" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-grid ui-corner-all"><a href="#p2" data-transition="flip" class="ui-btn ui-btn-right">Kort</a></a>

         <h1>VirksomhederTest</h1>

    </div>
    <!-- /header -->
    
<!-- content -->
<div data-role="content" id="cont">
           <h1>h</h1>

<form>
    <input data-type="search" id="filterControlgroup-input">
</form>
<div  class="elements" data-role="collapsibleset" data-theme="a" data-content-theme="a">

   		 <div class="results" data-mini="true" data-role="collapsible">
       		 <h3  data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">Schneider Electric</h3>
           	  <p class="doh">
               
                <img style="max-width:100%"...

JavaScript

$(document).ready(function () {
    //$('.doh').show();
    $(document).on("change", ".tagsinput", function () {
        $('.results').hide();
        $('div.tags').find('input:checked').each(function () {
            console.log("checked " + $(this).attr('rel'));
            console.log($('span.' + $(this).attr('rel')).closest(".doh"));
            $('span.' + $(this).attr('rel')).closest(".results").show();
        });
    });
});