Remove element level display: none using CSS

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
    }
}