How can I change my java scrip to work if the selected has multiple words, for example bellow the value has two words “Online Events” the div class is two words “Online Events” however it will remain hidden as the current Jquery will only look for the value if matches the class as one word.
let $j = jQuery.noConflict();
$j(document).ready(function($j) {
$j("#event-drop").change(function() {
let opt = $j(this).val();
if (opt === "all") {
$j(".event_div").show();
} else {
$j(".event_div").hide();
$j("." + opt).show();
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="event-drop" style="margin-bottom:20px">
<option value="all">All</option>
<option value="Online Events">online</option>
<option value="Ofline Events">online</option>
</select>
<div class="card-deck col-4 pb-5 Online Events event_div" style="">
<div class="card top-line-grey">
<small class="card-header bg-transparent border-0 font-weight-bold text-uppercase" style="color: #8D8CAB">here titlke</small>
<div class="card-body">
<h5 class="card-title text-capitalize pb-2">Sub title</h5>
</div>
<div class="card-footer bg-transparent border-0">
<small class="float-left font-weight-bold text-uppercase">
small text </small>
<small class="float-right font-weight-bold text-uppercase">
January 4, 2022 </small>
</div>
<div class="card-footer bg-transparent border-0">
<a class="btn-link text-uppercase" href="http://www.google.com" target="_blank">
More info </a>
</div>
</div>
</div>