# Show a section when clicking on a button in a md file

**URL:** <https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629>\
**Category:** support\
**Created:** [September 22, 2022, 7:23am UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629 "2022-09-22T07:23:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anna\_Setiva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anna_setiva/32/17810_2.png) [@Anna\_Setiva](https://discourse.gohugo.io/u/Anna_Setiva)\
**Post date:** [September 22, 2022, 7:23am UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/1 "2022-09-22T07:23:12Z")

</div>

Hello,  
I’m new to Hugo and I’m working with a project created by someone else, that is based on markdown.  
I want to add some logic: Open a panel / section including some text when clicking on a button.  
Is it possible? any hint?  
Thanks!

---

<div class="post-metadata">

**Author:** ![fekete-robert](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fekete-robert/32/13363_2.png) [@fekete-robert](https://discourse.gohugo.io/u/fekete-robert)\
**Post date:** [September 22, 2022, 9:02am UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/2 "2022-09-22T09:02:15Z")

</div>

I think the geekdoc theme’s expand shortcode does what you are looking for: [hugo-geekdoc/expand.html at main · thegeeklab/hugo-geekdoc · GitHub](https://github.com/thegeeklab/hugo-geekdoc/blob/main/layouts/shortcodes/expand.html)

---

<div class="post-metadata">

**Author:** ![Anna\_Setiva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anna_setiva/32/17810_2.png) [@Anna\_Setiva](https://discourse.gohugo.io/u/Anna_Setiva)\
**Post date:** [September 22, 2022, 11:28am UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/3 "2022-09-22T11:28:03Z")

</div>

Thank you, I’ll have a look at it. First I’ll look for an introduction tutorial on shortcodes

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [September 22, 2022, 12:05pm UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/4 "2022-09-22T12:05:54Z")

</div>

You could use HTML’s `detail/summary` éléments – they’re designed for exactly that purpose.

---

<div class="post-metadata">

**Author:** ![Anna\_Setiva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anna_setiva/32/17810_2.png) [@Anna\_Setiva](https://discourse.gohugo.io/u/Anna_Setiva)\
**Post date:** [September 22, 2022, 12:17pm UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/5 "2022-09-22T12:17:00Z")

</div>

Thanks @chrillek . have I to embed these HTML’s `detail/summary` in the shortcodes or directly in the markdown?  
Sorry but I’m an absolute beginner 🙂

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [September 22, 2022, 1:42pm UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/6 "2022-09-22T13:42:49Z")

</div>

That’s a matter of taste. I wouldn’t want to use HTML in my MD files, though, if I can avoid that.

---

<div class="post-metadata">

**Author:** ![Anna\_Setiva](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anna_setiva/32/17810_2.png) [@Anna\_Setiva](https://discourse.gohugo.io/u/Anna_Setiva)\
**Post date:** [September 22, 2022, 2:04pm UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/7 "2022-09-22T14:04:49Z")

</div>

Thanks both for your good input.  
I could solve my use case in the following way:

1. Created a shortcode called code.html like this:

```auto
<details>
    <summary>{{.Get 0}} </summary>
    <pre>
        <code>{{.Inner}}</code>
    </pre>    
</details>

```

and included it in the md in this way

```auto
{{< code Summary >}}
detail to display
{{< /code >}}

```

Thanks again!

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 23, 2022, 2:44pm UTC](https://discourse.gohugo.io/t/show-a-section-when-clicking-on-a-button-in-a-md-file/40629/8 "2022-09-23T14:44:06Z")

</div>

Split this topic on September 23, 2022, 2:44pm UTC

A post was split to a new topic: [Creating tabs](https://discourse.gohugo.io/t/creating-tabs/40653)