Remove element level display: none using CSS - html

Question

I have a page that hides a div when the screen is small, showing another div with a clickable + to expand the hidden div.
#media screen and (max-width: 1230px) {
#details_Title {
display: none;
}
#details_Details {
display: inline; // THIS DOES NOT WORK AFTER JQUERY SLIDEUP
}
}
#media screen and (max-width: 990px) {
#details_Title {
display: inline;
}
#details_Details {
display: none;
}
}
The HTML
<div id="details_Title" onclick="showDetails()">
<b>Details</b>
<img id="imgPlusMinus" src="images/plus.png"/>
</div>
<div id="details_Details">
.... the details
</div>
JS
function showDetails() {
var img=document.getElementById('imgPlusMinus').src;
if (img.indexOf('plus.png')!=-1) {
document.getElementById('imgPlusMinus').src ='images/minus.png';
$("#details_Details").slideDown();
}
else {
document.getElementById('imgPlusMinus').src='images/plus.png';
$("#details_Details").slideUp();
}
}
Make the screen small, the divs show and hide correctly, click the + and the div details_Details expands as expected.
The problem is that if you close it and jQuery slides up the div details_Details, display: none is applied at the element level and the display: inline from the media query does not get applied. How do I get around this? Can I remove/overwrite the element level style from the media query?

Answer 1

$('#click').on('click', function() {
$('#toggle').toggle();
});
#media(min-width:767px){
#toggle{
display: block!important;
}
}
#click{
display: none;
}
#media(max-width:767px){
#click{
display: block;
}
#toggle {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="click">click</div>
<div id="toggle">always show above 767px</div>
Add a declaration for min-width so it will show no matter what.
#media screen and (min-width: 1230px) {
#details_Details {
display: inline!important; // THIS WILL WORK AFTER JQUERY SLIDEUP
}
}