Avoid using the !important css attribute for showing my container - html

Question

I show/hide a container with boxes inside as showed below.
I use a simple mechanism with toggleClass to show/hide the container.
$("#btn").click(
function () {
$("#switch-apps-panel").toggleClass('flex-apps-panel');
}
);
The problem is I had to use the important attribute on the css and I prefer to avoid it.
.flex-apps-panel {
display: flex !important;
}
Any help on slightly changing my code to avoid using the important attribute ?
jsFiddle: https://jsfiddle.net/hg60e8gf/

Answer 1

You defined switch-apps-panel as an ID. IDs are always higher ranked and more specific than class names.
In order to get rid of your !important statement, either change the ID to a class or make your selector more specific and add the ID selector to your .flex-apps-panel like this:
#switch-apps-panel.flex-apps-panel {
display: flex;
}
Here I changed it to be a class:
$(document).ready(function() {
$("#btn").click(
function() {
$(".switch-apps-panel").toggleClass('flex-apps-panel');
}
);
});
.switch-apps-panel {
display: none;
z-index: 9999;
position: fixed;
top: 70px;
left: 10px;
background-color: white;
border: 1px solid #b6b6b6;
box-sizing: content-box;
box-shadow: 0 1px 15px rgba(0, 0, 0, .4);
padding: 10px 10px 10px 10px;
}
.flex-apps-panel {
display: flex;
}
.box-1 {
margin: 8px;
width: 100px;
background-color: yellow;
}
.box-2 {
margin: 8px;
width: 100px;
background-color: blue;
}
.box-3 {
margin: 8px;
width: 100px;
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
By default, boxes are hidden.
<button id="btn">Click here to show/hide boxes</button>
<div class="switch-apps-panel">
<div class="box-1">
<span>First</span>
</div>
<div class="box-2">
<span>Second</span>
</div>
<div class="box-3">
<span>Third</span>
</div>
</div>

Answer 2

You need to increase your selector's specificity. ID selectors have higher specificity than class selectors, so you can just try to select your ID with class like this:
#switch-apps-panel.flex-apps-panel {
display: flex;
}
You can read more about specificity on MDN, and also try to avoid styling by IDs in the future.