JSFiddle - React, Tailwind, and code Playground

by Emerson Marini

HTML

<select id="mySelect">
    <option value="">Please select...</option>
    <option value="Design">Design</option>
    <option value="Graphic Design">Graphic Design</option>
</select>
<br />
<dl class='gallery-item'> <dt class='gallery-icon landscape'>
        <a href="Page Link" target="_self" class="no-lightbox"><img width="250" height="250" src="Display Image" class="attachment-full" alt="Design" /></a>
    </dt>

    <dd class='wp-caption-text gallery-caption'>Description of Page</dd>
</dl>

<dl class='gallery-item'> <dt class='gallery-icon landscape'>
        <a href="Page Link" target="_self" class="no-lightbox"><img width="250" height="250" src="Display Image" class="attachment-full" alt="Graphic Design" /></a>
    </dt>

    <dd class='wp-caption-text gallery-caption'>Description of Page</dd>
</dl>

CSS

.gallery-item {
    display: none;
}

JavaScript

$(function () {
    $('#mySelect').on('change', function () {
        $('.gallery-item').hide();
        
        if ($(this).val()) {
            $('[alt="' + $(this).val() + '"]').parents('.gallery-item').show();
        }
    });
});