k-hide Tag

Hides the contents if the condition is True.

Scenario 1:

To hide the broken image icon, in case there is no image with a blog post.

Using k-hide tag you can simply hide the contents of the div i.e. the <img> tag.

<div class="date">
    <figure><span>20</span>OCT</figure>
</div>

Let us change this code to add an img tag here,

<div class="date">
    <figure><img src=""></figure>
</div>

But this shows the broken image icon :(

<div class="date" k-hide="True">
    <figure><img src=""></figure>
</div>

This will hide the image if there is no image with the update or if the url returned by kitsune is null, instead of showing a broken image icon.

Info

When kitsune compiles your HTML page, if the condition given with the k-hide tag is true, it removes that HTML tag with all of its content, thus making it look like the code for the missing information never existed!

Scenario 2:

To hide the content if there is no data for a particular section on the website.

Code example:

<div k-hide="True">
    <img src="">
    <h1></h1>
    <p></p>
</div>

This will hide the entire div if there are no blog posts available on k-admin.

Info

Here are some of the operators kitsune supports:

*, /, +, -, ==, != , < , >, <=, >=, &&, ||, !