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?

prettyInPink · Accepted Answer · 2021-04-19T19:30:01.303

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

edited Apr 19 '21 at 19:30

answered Apr 19 '21 at 19:07

prettyInPink

3,291
3
21
32

I am trying to avoid the use of important as it is not very good practice. – RGriffiths Apr 19 '21 at 19:09
1

Not necessarily, in some cases ```!important``` would be bad practise, in this one it is the best approach. https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – prettyInPink Apr 19 '21 at 19:14
Also when you apply !important here it overides the @media screen and (max-width: 990px) and so defeats the object. – RGriffiths Apr 19 '21 at 19:22
No, because it would only be applied when the screen is taller than 1230px. – prettyInPink Apr 19 '21 at 19:23
The included example does just that, no? – prettyInPink Apr 19 '21 at 19:33
Got it - nice one! Shame there is not an alterenative to important though. – RGriffiths Apr 19 '21 at 20:11
1

Instead of using ```toggle``` you could use ```addClass``` and ```removeClass``` which would involve a little bit more code, but in that case you could omit the ```!important``` declaration. – prettyInPink Apr 19 '21 at 20:14

Remove element level display: none using CSS

1 Answers1