Hide or show content

Hidden

Hide content in a non-accessible way. Content is hidden for everybody including screenreaders.

<div class="k-hidden">
    ...
</div>

Visually hidden

Hide the content in an accessible way. Content is hidden for viewers but not for screenreaders

<div class="k-visually-hidden">
    ...
</div>

Visually shown

Show content that have the .visually-hidden class.

  • Use as @extend for items that are already extending .k-visually-hidden.
  • Avoid using .k-visually-hidden and .k-visually-shown classes together.
<div class="k-visually-shown">
    ...
</div>

Touch events hidden

Hide elements for touch enabled devices

<div class="k-touchevents-hidden">
    ...
</div>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.

Join 23000+ others and subscribe to our newsletter!