Customizable drop downs using the HTML details tag

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>;;

  }