create how-to-use section for api key, domain, directory, mailbox

app/dashboard/templates/dashboard/api_key.html

@@ -12,9 +12,14 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> API Key </h1>
+      <h1 class="h3"> API Key
+        <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>
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         The API Key is used on the SimpleLogin Chrome/Firefox/Safari extension. <br>
         You can install the Chrome extension on
         <a href="https://chrome.google.com/webstore/detail/simplelogin-extension/dphilobhebphkdjbpfohgikllaljmgbn"

app/dashboard/templates/dashboard/custom_domain.html

@@ -11,7 +11,12 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Custom Domains </h1>
+      <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() %}
         <div class="alert alert-danger" role="alert">
@@ -19,7 +24,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         If you own a domain, let's say <b>example.com</b>, you will be able to create aliases with this domain, for
         example
         contact@example.com, help@example.com, etc with SimpleLogin. <br>

app/dashboard/templates/dashboard/directory.html

@@ -8,7 +8,13 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Directories </h1>
+      <h1 class="h3"> Directories
+        <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() %}
         <div class="alert alert-danger" role="alert">
@@ -16,14 +22,15 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" id="howtouse" role="alert">
         <div>
           Directory allows you to create aliases <b>on the fly</b>.
         </div>
         <div class="mt-2 pb-2">
           1️⃣ Pick a name for your directory, says <em>my_dir</em> <br>
 
-          2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias beforehand</b>
+          2️⃣ Quickly use one of the following formats to create an alias on-the-fly <b>without creating this alias
+          beforehand</b>
         </div>
         <div class="pl-3 py-2 bg-white">
           <em>my_dir/<b>anything</b>@{{ FIRST_ALIAS_DOMAIN }}</em> or <br>

app/dashboard/templates/dashboard/mailbox.html

@@ -8,7 +8,12 @@
 {% block default_content %}
   <div class="row">
     <div class="col">
-      <h1 class="h3"> Mailboxes </h1>
+      <h1 class="h3"> Mailboxes
+        <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() %}
         <div class="alert alert-danger" role="alert">
@@ -16,7 +21,7 @@
         </div>
       {% endif %}
 
-      <div class="alert alert-primary" role="alert">
+      <div class="alert alert-primary collapse" 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>