Easily change state of HTML elements using Class names.

[qasim2020]

Use CSS class names to easily change stuff on your websites. It keeps code cleaner and builds your CSS-vocabulary over time. For example toggling display of an element:-

CSS

d-none : {
display: none !important;
}

d-block : {
display: block !important;
}

HTML

<div id="error-msg">
This is may be some error message on your form.
</div>

jQuery

$('#error-msg').toggleClass('d-none d-block');

Example

Here is a code pen to make popular collapsing navbar. Toggle between class names .collapse and .collapsing using jQuery. https://codepen.io/qasim_ali/pen/wbLpPG

Additional Uses

• toggle states between .active and .in-active class names.
• change opacity using .hide and .show class names.
• change <button> style using .btn-outline-dark and .btn-outline-light class names.

so many possibilities, it helped me a lot. I picked this convention from bootstrap.

[qasim2020]

@mddanishyusuf can you please check if it is valid and push it to dailyhacks. Thanks.

Qasim here.