site/themes/hugo-theme-console/layouts/shortcodes/talks.html

{{ $json := getJSON "data/talks.json" }}

<!-- Extract unique locations -->
{{ $locations := slice }}
{{ range $json.talks }}
    {{ $location := .location }}
    {{ if not (in $locations $location) }}
        {{ $locations = $locations | append $location }}
    {{ end }}
{{ end }}

<!-- Display location buttons -->
<div id="locationButtons">
    {{ range $locations }}
        <button class="locationButton" data-location="{{ . }}">{{ . }}</button>
    {{ end }}
</div>
<!-- Display talks for each location -->
{{ range $locations }}
    <div class="talksContainer" id="talks_{{ . }}" style="display: none;">
        <h2>{{ . }}</h2>
        <ul>
            {{ $currentLocation := . }}
            {{ range $json.talks }}
                {{ if eq .location $currentLocation }}
                    <li>
                        <strong>Title:</strong> {{ .title }}<br>
                        {{ with .subtitle }}
                            {{ if ne . "" }}
                                <strong>Subtitle:</strong> {{ . }}<br>
                            {{ end }}
                        {{ end }}
                        {{ if isset . "speakers" }}
                            {{ $speakers := .speakers }}
                            {{ if ne (len $speakers) 0 }}
                                <strong>Speakers:</strong> 
                                {{ range $index, $speaker := $speakers }}
                                    {{ $speaker }}
                                    {{ if ne $index (sub (len $speakers) 1) }}, {{ end }}
                                {{ end }}<br>
                            {{ end }}
                        {{ end }}
                        <strong>Date:</strong> {{ .date }}<br>
                        <strong>URL:</strong> <a href="{{ .url }}">{{ .url }}</a><br>
                        <strong>Description:</strong> {{ .description }}<br><br>
                    </li>              
                {{ end }}
            {{ end }}
        </ul>
    </div>
{{ end }}

<script>
    // Add click event listener to location buttons
    var locationButtons = document.getElementsByClassName("locationButton");
    for (var i = 0; i < locationButtons.length; i++) {
        locationButtons[i].addEventListener('click', function() {
            var location = this.dataset.location;
            var talksContainer = document.getElementById("talks_" + location);
            // Toggle visibility of talks container
            talksContainer.style.display = talksContainer.style.display === "none" ? "block" : "none";
        });
    }
</script>