automatically show how-to-use

app/dashboard/templates/dashboard/custom_domain.html

@@ -12,6 +12,10 @@
   <div class="row">
     <div class="col">
       <h1 class="h3"> Custom Domains
+        <a class="ml-3 text-info" style="font-size: 12px" data-toggle="collapse" href="#howtouse" role="button"
+           aria-expanded="false" aria-controls="collapseExample">
+          How to use <i class="fe fe-chevrons-down"></i>
+        </a>
       </h1>
 
       {% if not current_user.is_premium() %}
@@ -23,6 +27,14 @@
         </div>
       {% endif %}
 
+      <div class="alert alert-primary collapse {% if not custom_domains %} show {% endif %}" id="howtouse" role="alert">
+        By adding your domain, you can create aliases like <b>hi@my-domain.com</b> <br>
+
+        You can also enable <b>catch-all</b> to create aliases on-the-fly:
+        simply use <b>anything@my-domain.com</b> and it'll be created when
+        it receives an email.
+      </div>
+
       <div class="row">
         {% for custom_domain in custom_domains %}
           <div class="col-12 col-lg-6">

app/dashboard/templates/dashboard/directory.html

@@ -22,7 +22,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary collapse" id="howtouse" role="alert">
+      <div class="alert alert-primary collapse {% if not dirs %} show {% endif %}" id="howtouse" role="alert">
         <div>
           Directory allows you to create aliases <b>on the fly</b>.
         </div>

app/dashboard/templates/dashboard/mailbox.html

@@ -21,7 +21,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary collapse" id="howtouse" role="alert">
+      <div class="alert alert-primary collapse {% if mailboxes|length == 1 %} show {% endif %}" id="howtouse" role="alert">
         A <em>mailbox</em> is just another personal email address. When creating a new alias, you could choose the
         mailbox that <em>owns</em> this alias, i.e: <br>
         - all emails sent to this alias will be forwarded to this mailbox <br>