Javascript to determine if the class contains a string in its name

Question

I have the following html code generated using R shiny collapsible boxes:

<div class="box box-info collapsed-box">
           <div class="box-header">
                     <h3 class="box-title">
                              <div style="display: block; width: 74%; ">1. Governance framework</div>
                     </h3>
                     <div class="box-tools pull-right">
                                <button class="btn btn-box-tool" data-widget="collapse">
                                             <i class="fa fa-minus"></i>
                                </button>
                    </div>
           </div>
           <div class="box-body" id="idtolocate" style="display: block;">
           </div>
</div>

I am trying to create a javascript which should return TRUE if the string collapsed-box is contained in the first div class that i need to locate using the idtolocate id.

This is my try, but it doesn't work unfortunately:

function isCollapsed() {
   alert($('#idtolocate').closest('.box').classList.contains('collapsed-box'))
}

Answer 1

.classList is a property of native DOM elements. If you want to use that method, extract the DOM element from the jQuery collection first:

$('#idtolocate').closest('.box')[0].classList.contains('collapsed-box')

Or select the element with DOM methods instead of jQuery to start with:

document.querySelector('#idtolocate').closest('.box').classList.contains('collapsed-box')