# Adding interactivity ## In this section * Add a searchable Table of Contents using Law Widgets * Add interactivity with Law Widgets for defined terms and internal references Now that we have a detail page showing the content of the documents, let's add some interactivity using Laws.Africa's [Law Widgets](https://github.com/laws-africa/law-widgets). ## Table of Contents A searchable Table of Contents is important to make long legislative documents easier to navigate. There are two widgets you can use for the Table of Contents: * [\](https://github.com/laws-africa/law-widgets/blob/main/core/src/components/table-of-contents/readme.md) - this is a basic Table of Contents tree. * [\](https://github.com/laws-africa/law-widgets/blob/main/core/src/components/table-of-contents-controller/readme.md) - this is a fully searchable and collapsible Table of Contents tree that builds on top of \. We'll use la-table-of-contents-controller because it gives us rich functionality right out the box. Let's divide our content section into two columns to make room for the Table of Contents in a sidebar on the left of the page. {% code title="expression\_detail.html" %} ```html {{ expression.title }} Home

{{ expression.title }}

{{ expression.content|safe }}
``` {% endcode %} We need to provide the `` with the JSON Table of Contents data in the items attribute. This is the data that is provided by the Laws.Africa Content API. Update the `views.py` to add turn the TOC information into JSON. {% code title="views.py" %} ```python import json # ... class ExpressionDetailView(DetailView): model = Expression slug_field = 'frbr_uri' slug_url_kwarg = 'frbr_uri' def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context['toc_json'] = json.dumps(self.object.toc_json['toc']) return context ``` {% endcode %} The page now has an interactive table of contents. ## Popups for defined terms We're going to use the [\](https://github.com/laws-africa/law-widgets/blob/main/core/src/components/decorate-terms/readme.md) Law Widget to add popups for defined terms that occur in a document.
Modify `expression_detail.html` to include the new widget anywhere on the page: 
...
<la-decorate-terms popup-definitions link-terms></la-decorate-terms>
<la-akoma-ntoso ...>...</la-akoma-ntoso>
...
This widget will add term definition popups and links in the first `` element on the page. If there is more than one, you can target it specifically by providing an **akoma-ntoso** attribute that uses a CSS selector to identify the target element: ``. You can control the behaviour by adding or removing these attributes. Try changing them and refreshing the page to see what changes. * `popup-definitions` - controls whether definitions of terms are shown in popups * `link-terms` - controls whether references to terms are shown as clickable links. ## Popups for internal references We're going to use the [\](https://github.com/laws-africa/law-widgets/blob/main/core/src/components/decorate-internal-refs/readme.md) widget to make internal references more interactive. The widget will show a purple bookmark at an internal reference, and show the content of the target element when the user hovers over the reference.
Modify `expression_detail.html` to include the new widget: {% code title="expression\_detail.html" %} ```html ... ... ... ``` {% endcode %} This widget will add interactivity to internal references in the first `` element on the page. Like with `` , you can use the **akoma-ntoso** attribute to target a specific `` element using a CSS selector, such as ``. You can control the behaviour by adding or removing these attributes. Try changing them and refreshing the page to see what changes. * `popups` - controls whether reference target elements are shown in popups * `flag` - controls whether internal references are decorated with a purple bookmark icon --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developers.laws.africa/tutorial/module-1-build-a-legislation-reader/adding-interactivity.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.