> For the complete documentation index, see [llms.txt](https://developers.laws.africa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.laws.africa/tutorials/module-1-build-a-legislation-reader/adding-interactivity.md). # Adding interactivity Adding some basic interactivity using Law Widgets. ## 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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://developers.laws.africa/tutorials/module-1-build-a-legislation-reader/adding-interactivity.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.