# 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