Miscellaneous-Pk
2 months ago

Easily change state of HTML elements using Class names.

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.

Do you have any comment on this tricks? then let the author know about that. comment here