I'm trying make plus/minus expand/collapse. In the mobile version it's working fine but in desktop view I will try to hide but it's not working; display: none is not working.
When I click the desktop version shows plus/minus sign, I need too hide from desktop.
jQuery(document).ready(function() {
var windowWidth = jQuery(window).width();
if (windowWidth <= 768)
jQuery('.panel-collapse').removeClass('in');
$(this).closest(".day-header").find(".plus,.minus").toggle();
jQuery('.toggle-menu').click(function() {
// get this data-target
var target = $(this).data("target");
$(target).toggleClass('in');
$(this).closest(".day-header").find(".plus,.minus").toggle();
});
$(".minus,.plus").click(function() {
$(this).hide();
});
});.toggle-menu {
cursor: pointer;
}
.col .collapse.in {
display: block;
}
.col .collapse {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="day-header">
<h4>
<span class='plus' style='display:none;'>+</span>
<span class='minus'>-</span>
<a class="toggle-menu" data-target="#foot">Footwere</a>
</h4>
</div>
<div id="foot" class="panel-collapse collapse in">
<p>
Show footwere
</p>
</div>
</div>
<div class="col">
<div class="day-header">
<h4><a class="toggle-menu" data-target="#cloth">cloths</a></h4>
</div>
<div id="cloth" class="panel-collapse collapse in">
<p>
Show cloth
</p>
</div>
</div>