Display content on the page when tab is selected

[bob3x255]

Hi!

I am trying to implement logic in my layout that generates buttons with anchor links and shows respective content piece from front matter when respective button (tab) is selected.

For example, this my front matter:

title: "Test"
draft: false
type: "system"
layout: single.html

content:
    - test1:
        title: "Test1"
        description: "Lorem ipsum"
    - test2:
        title: "Test2"
        description: "Lorem ipsum"
    - test3:
        title: "Test3"
        description: "Lorem ipsum"

Here’s the layout:
I implemented the page header that iterates over content in front matter and generates buttons for “test1”, “test2”, “test3” along with anchors in URL.

    {{/*  PAGE HEADER  */}}
    <section class = "p-6">
        <h1 class="text-4xl font-extrabold">
            {{ .Title | emojify }}
        </h1>
        <div class = "flex flex-row items-start pt-6">
            {{ range $index, $element := .Params.content }}
              {{ range $key, $value := $element }}
                <a class="px-4 py-1.5 flex-row items-center align-middle rounded-full text-base text-darkGreen bg-lime-100" href="#{{ $key }}">
                  {{ $key }}
                </a>
              {{ end }}
            {{ end }}
          </div>
        <hr class="mt-6 border-footerGray">
    </section>

Now, I am struggling to understand how I can display either “test1”, “test2” or “test3” content when the button is selected.

{{/*  CONTENT BLOCKS  */}}
    {{ with .Params.test1 }}
    <section class = "mt-6">
        <div class = "flex flex-row items-center justify-end">
            <div class = "p-6"> 
                <h2 class="mt-6 text-5xl font-bold"> 
                    {{ .title | markdownify }}
                </h2>
                <p class = "mt-6 pb-6 text-lg">
                    {{ .description | markdownify }}
                </p>
            </div>
        </div>
    </section>
    {{ end }}

Image referenceL

Any help is appreciated, I am trying to achieve this using only Hugo functionality, if that’s possible.
Thanks!

[frjo]

This is a HTML/CSS/JS question, not a Hugo question. Stackoverflow or similar would be a better place to ask.

But in short you need to add all the content to the page and then use CSS/JS to show/hide parts based on button pressed.

[bob3x255]

So, there is no way I can implement such logic using Hugo without JS?

[nternetinspired]

It is not easy to implement a tabbed interface without JS. It doesn’t matter what the platform is, this is not something html natively provides, and Hugo generates html. It may be possible with CSS, but tbh it will be much easier with Javascript.

Bottom line is, if you want anything beyond html it is up to you to add that.

[nternetinspired]

Hugo’s logic can be used to generate the html you would need, but the functionality is something else altogether.