Bootstrap Tabs as Hugo Shortcodes -
i trying create shortcode bootstrap tabs. have following html structure,
<nav class="nav nav-tabs" id="mytab" role="tablist"> <a class="nav-item nav-link" id="{{ .get `id` }}-tab" data-toggle="tab" href="#{{ .get `id` }}" role="tab" aria-controls="{{ .get `id` }}"> {{ .get "title" }} </a> </nav> <div class="tab-content" id="nav-tabcontent"> <div class="tab-pane fade" id="{{ .get `id` }}" role="tabpanel" aria-labelledby="{{ .get `id` }}-tab"> {{ .inner }} </div> </div>
the structure contains hugo placeholder. inner part of code, is,
<a class="nav-item nav-link" id="{{ .get `id` }}-tab" data-toggle="tab" href="#{{ .get `id` }}" role="tab" aria-controls="{{ .get `id` }}"> {{ .get "title" }} </a>
is required multiple times along corresponding content div is,
<div class="tab-pane fade" id="{{ .get `id` }}" role="tabpanel" aria-labelledby="{{ .get `id` }}-tab"> {{ .inner }} </div>
now problem have pass id
argument of inner structure , should detached parent. should able use shortcode in following way:
{% tabs %} {% tab id = "tab-1" title = "tab one" %} content in tab 1 {% \tab %} {% tab id = "tab-2" title = "tab two" %} content in tab 2 {% \tab %} {% \tabs %}
how can achieve this?
Comments
Post a Comment