Create a Guide/Template: for using <details> and <summary> tags in an issue

[ExperimentsInHonesty]

Overview

We need to create a guide to using <details> and <summary> tags so that issues can be more concise.

Action Items

The phases in the guide-making process are listed below. Each phase displayed in blue is linked to a wiki page with instructions on how to complete that phase. Open the wiki page in a new tab, copy the instructions for each part into the section labelled 'Tasks' at the bottom of this issue, and complete each task listed.

• Gather Examples Solo (open in a new tab)
• Gather Examples Collaboratively
• Create a Guide Draft
  • If needed, create a template
• Have your guide peer reviewed
• Present your guide for leadership review

Resources/Instructions

• What is the details html tag:
  • https://www.w3schools.com/tags/tag_details.asp
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Details about how other teams are using it for the Gather step

Example of it in use on an issue: hackforla/website#1146
and these three items are an example of how to use it.

Closed

Open

Example of Code from an issue

Code to try out

<details >
<summary>current gif</summary>

![image](https://www.hackforla.org/assets/images/about/HfLA-Donate.gif)

</details>

Projects to Check

Tasks

• This is where you will copy instructions from the wiki page for the step you are currently on.

[akibrhast]

Drop Down Template Syntax

IMPORTANT: THE EMPTY LINE AFTER THE SUMMARY TAG MUST EXIST FOR formatted content (bullets, images, etc. ) TO RENDER PROPERLY

<details>
<summary>YOUR_TEXT_HERE</summary>

PASTE_YOUR_IMAGE_HERE
</details>

[aymarmsba]

Prior version of issue

Overview

We need to create a guide to using <details> and <summary> tags so that issues can be more concise.

Action Items

• Update issue Tracker: Templates & Guides product-management#128 with the name of item you are working
• Gather examples of how other projects have done, adding each example as a link in the resources section
  • Once done, remove the "TG: Gather Examples" label and add the "TG: Create Guide" label
• Create a guide on how to use the template
  • Once done, remove the "TG: Create Guide" label and add the "TG: Review Guide" label
• Review the guide with product management communities of practice
  • Once done, remove the "TG: Review Guide" label and add the "TG: Leadership Review" label
• Present to Hack for LA leadership team for sign off
  • Once approved, remove the "TG: Leadership Review" label and add the "TG: Place Guide" label
• Possibly create an issue template on .github
  • Include link to template under resources if you add it as a template in .github

Resources

• Refer to Create a document template for Guides product-management#123 for how to write a guide and the guide template

• What is the details html tag:

  • https://www.w3schools.com/tags/tag_details.asp
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Details about how other teams are using it for the Gather step

Example of it in use on an issue: hackforla/website#1146
and these three items are an example of how to use it.

Closed

Open

Example of Code from an issue

Code to try out

<details >
<summary>current gif</summary>

![image](https://www.hackforla.org/assets/images/about/HfLA-Donate.gif)

</details>

[aymarmsba]

Assignee, Labels, Project Board Placement, and Milestones for this issue in the Product Repo: