How to add tags filter button

Developer help
1
  • What’s your URL? https://pandia.pro/
  • What version of Ghost are you using? latest
  • How was Ghost installed and configured? Hosted on Ghost Pro

Hello, I have this page https://pandia.pro/guide/ to display all my posts with the tag “guide”. But my posts with “guide” tag can also have a secondary tag like “chatgpt” or “midjourney” for example.

I want too add some buttons at the top of my page to filter the secondary tags. So I would have 2 buttons in my example. “chatgpt” and “midjourney” and if I toggle “midjourney” only the posts with both “guide” and “midjourney” would stay, the others would hide. If nothing is toggled, all “guide” posts are displayed. I tried some stuff with javascript but it was not working. Here is the code of my page :

{{!< default}}
<!-- #page des tags -->
<main class="gh-main gh-outer">
    <div class="gh-inner">
        {{#get "tags" filter="slug:guide" include="count.posts" as |guide_tag|}}
    {{#foreach guide_tag}}
        {{#unless feature_image}}
            <section style="margin-bottom:0px!important" class="gh-pagehead">
                <h1 style="margin-bottom:8px!important" class="gh-pagehead-title">{{name}}</h1>

                {{#if description}}
                    <div style="border-bottom: 1px solid var(--color-light-gray);" class="gh-pagehead-description" id="gh-pagehead-description-tag">{{description}}</div>
                {{/if}}
            </section>
        {{/unless}}
    {{/foreach}}
{{/get}}

        <div class="gh-topic gh-topic-grid">
    <div class="gh-topic-content gh-feed">
        {{#get "posts" filter="tags:guide" include="tags,authors" limit="all" as |guide_posts|}}
            {{#foreach guide_posts}}
                {{> "loop-grid"}}
            {{/foreach}}
        {{/get}}
    </div>
</div>
    </div>
</main>

I hope someone can help me, thank you :pray: