Customizable drop downs using the HTML details tag

[Marcus_O_Hanlon]

Using the HTML <details> syntax it is possible to create drop down buttons that can display additional information relating to a specified grouping in Looker.

Say for example we wanted to display the total gross margin and create a drop down that showed the sales price and the purchase cost, by using the html field parameter with the <details> tag you can achieve the functionality shown below:

Here is the LookML required to create the drop down:

measure: total_gross_margin {
type: sum
value_format_name: usd
sql: ${gross_margin} ;;

html: <div style="width:100%; text-align: centre;"> <details>
<summary style="outline:none">{{ total_gross_margin._linked_value }}</summary>
Sale Price: {{ total_sales_price._linked_value }}
<br/>
Inventory Costs: {{ inventory_items.total_cost._linked_value }}

</details>
</div>;;
  }