Styling with TailwindCSS

HTML detail element for disclosures with styling

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.

Join course for $15

Modified files

static/input.css

--- 
+++ 
@@ -32,4 +32,8 @@

 .error {
   @apply p-2 my-2 text-sm text-red-700 bg-red-50 rounded-md border-red-300 border;
+}
+
+details > summary::-webkit-details-marker {
+  display: none;
 }

templates/account/signup.html

--- 
+++ 
@@ -39,6 +39,13 @@
                 <div class="form-field">
                   {% render_field form.password1 class="block text-black shadow-sm focus:ring-emerald-500 focus:border-emerald-500 border-gray-300 text-sm" %}
                 </div>
+                <details class="text-sm rounded-md border border-gray-700 [&_svg]:open:rotate-90">
+                  <summary class="px-2 py-1 flex justify-between items-center list-none cursor-pointer bg-gray-700">
+                    <div>Password requirements</div>
+                    <span>{% include "svgs/chevron.svg" with class="w-5 h-5" %}</span>
+                  </summary>
+                  <div class="px-2 py-1 mt-2 min-w-full [&>ul]:space-y-1 w-0">{{ form.password1.help_text | safe }}</div>
+                </details>
               </div>
               <div>
                 <label class="sr-only" for="{{ form.password2.id_for_label }}">Password confirmation</label>