Is there any ways to make this code shorter? I'm coding with jQuery.
<div class="js-check-container" style="padding:0 0 0 19px;">
<img src="/assets/admin/css/img/icon-check.svg" style="display:none;" class="js-checked">
<img src="/assets/admin/css/img/icon-form-multi-choice-off.svg" class="js-unchecked">
</div>
$('.js-unchecked').click(function() {
$(this).slideUp(0);
$(this).parent('.js-check-container').find('.js-checked').slideDown(0);
})
$('.js-checked').click(function() {
$(this).slideUp(0);
$(this).parent('.js-check-container').find('.js-unchecked').slideDown(0);
})
You can add the same handler to both, and inside the handler, check whether the clicked element has the js-checked or js-unchecked class, from which you can generate the string to pass into .find.
$('.js-checked, .js-unchecked').click(function() {
const justClickedChecked = this.classList.contains('js-checked);
$(this).slideUp(0);
$(this)
.parent('.js-check-container')
.find(`.js-${justClickedChecked ? 'un' : ''}checked`)
.slideDown(0);
})