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-19 19:30:01Z

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, 2021 at 19:30

answered Apr 19, 2021 at 19:07

prettyInPink

3,4683 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

RGriffiths Over a year ago

I am trying to avoid the use of important as it is not very good practice.

prettyInPink Over a year ago

Not necessarily, in some cases !important would be bad practise, in this one it is the best approach. stackoverflow.com/questions/3706819/…

RGriffiths Over a year ago

Also when you apply !important here it overides the @media screen and (max-width: 990px) and so defeats the object.

prettyInPink Over a year ago

No, because it would only be applied when the screen is taller than 1230px.

prettyInPink Over a year ago

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.

|

Collectives™ on Stack Overflow

Remove element level display: none using CSS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related