My javascript suddenly stopped working and I'm not sure why. I have a code that has a clickable title text, which then reveals another text below it. Could you guys take a look and let me know what happened? Here's a simplified version of the code:
$(document).ready(function(){
$("#locations li span").click(function (e) {
if($(this).parent().hasClass('show-dropdown') ) {
$(this).parent().removeClass('show-dropdown');
}
else {
$("#locations li").removeClass('show-dropdown');
$(this).parent().addClass('show-dropdown');
}
});
});#locations .title:hover {
cursor: pointer;
}
li .appear {
visibility: hidden;
opacity: 0;
}
.show-dropdown .appear {
visibility: visible;
opacity: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="locations">
<li>
<span class="title">Title 1</span>
<div class="appear"> Dropdown 1
</div>
</li>
<li>
<span class="title">Title 2</span>
<div class="appear"> Dropdown 2
</div>
</li>
</ul>