Conditional display

1 - Display element B if element A is empty

In this example we will have a table view displaying information about students. Some have grades, and some don't, so we would like to display "No grades yet" when needed.

Html template : 

<h2>{{Name}}</h2> 
<p> {{Job}}</p> 
<div class="grades_container"> 
   <p>Grades : </p> 
   <p class="grades">{{Grades}}</p> 
   <p class="no_grades">No grades yet</p> 
</div>

Css style :

.grades_container{ 
background:lightgrey 
} 
.no_grades{
display:none 
} 
.grades:empty + .no_grades{ 
display:block 
}

2 - Display element B if element A's attribute is empty

In this example we will have a little table view of a team's members. Some of them have profile pictures, some don't. So we have to adapt the template so that it doesn't display a broken image when someone's {{Picture}} column is empty, and displays a default profile picture.

Html template :

<img class="profilePicture" src='{{Picture}}'> 
<img class="noProfilePicture" src="yourDefaultLinkPicture"> 
<p>{{Name}} - {{Job}}</p>

Css style 

.noProfilePicture{ 
display:none 
} 
.profilePicture[src=""] { 
display: none; 
} 
.profilePicture[src=""]:empty + .noProfilePicture{ 
display: block; 
}

With this code we keep a default picture hidden with a display:none; and if the src of profilePicture is empty, we hide this picture and display the default one.

3 - Display elements depending on the value

This tip was suggested by one of our user, Randolph Abelardo in this post.

In this example we will see how we can create a conditional template depending on your data. We are going to create a simple to do list; and task will have 'done', 'postponed' or 'to do' as their status. Task that are done will also have a completion date. We will want to display a different content depending on tasks status and display the completion date if the task is 'done'.

Html template : 

<div class="taskContainer">
  <strong>{{Task}}</strong>
  <p data-status="{{Status}}" class="status"></p>
  <p class="date">Done the : {{Done the}}</p>
</div>

Css style 

.status[data-status="postponed"]:after {
 content : "This task was postponed.";
 color : orange
}

.status[data-status="to do"]:after {
 content : "This task still has to be done.";
 color : blue
}

.status[data-status="done"]:after {
 content : "This task is done ! ";
 color : green
}

.date { 
 display : none 
}

.status[data-status="done"] + .date {
 display : block
}