dailyhack
dailyhack copied to clipboard
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.
@mddanishyusuf can you please check if it is valid and push it to dailyhacks. Thanks.
Qasim here.