Tabs are not clickable and shows all of the content at once

Tobias-Artur commented 2 years ago

Hello there,

I have followed the instructions so far 3 times (2 times using the git clone method and once manually) to add tabs to my theme. I have tried with both Bootstrap 4 and Bootstrap 5

The theme in question is Blist Theme. NOTE: I haven't done any major changes to the theme. I have removed the pages from them and added 2 shortcodes, which are not related to it.

The problem that I am facing is that the all tabs are showing as being highlighted and the content is all being displayed (example below):

I have tried the following variantions to get it working

Using just the {{< >}}
Using just the {{% %}}
Using {{< >}} in the tabs short code and using {{% %}} in the tab shortcode.

Please bare with me, as I am not sure whether I am missing some dependency on this.

Tobias-Artur commented 2 years ago

As an update: I managed to make the Tabs visible in a line, but still not clickable. I added the header part to my index theme file.

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">

    <title>Hugo Dynamic Tabs</title>

</head>

Tobias-Artur commented 2 years ago

Althought this is a patchy way of handling the css, it works.

The one thing that you have to take in consideration that it uses 3 things in order to render the css and the click-switching of the tabs:

css of tab.html
css of tabs.html
scripts from index.html

My suggestion would be to install this manually, as it will not interact with the CSS of your existing theme.

Create (if not created already) the following folder structure in your root site folder:
- /layouts/shortcodes/
In shortcodes, copy both tab.html and tabs.thml
Copy the Scripts located in the index file of hugo-dynamic-tabs in your index file located in the layouts's folder of your theme OR where your body would be normally located at (for me it was /theme/my-theme/layouts/_defaults/baseof.html)

This would look something like this: From hugo-dynamic-tabs/demo/layouts/index.html Copy the following:

<!-- Scripts -->

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

To /themes/my-theme/layouts/index.html OR for me it was /theme/my-theme/layouts/_defaults/baseof.html

  <body class="dark:bg-gray-800 dark:text-white relative flex flex-col min-h-screen">
    {{- partial "header.html" . -}}
    <main class="flex-1">
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    {{- block "main" . }}{{- end }}
    </main>
    {{- partial "footer.html" . -}}
  </body>

Make sure that it's inside the `body` tags. This might be different for your theme.

Add the following css to your `tab.html` shortcode:

<style>
    .tab-content>.tab-pane {
        display: none;
    }

    .tab-content>.active {
        display: block;
    }

    .fade {
        transition: opacity 0.15s linear;
    }
    .fade:not(.show) {
        opacity: 0;
      }
      .modal.fade .modal-dialog {
        transition: -webkit-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
        -webkit-transform: translate(0, -50px);
        transform: translate(0, -50px);
      }
      .modal-backdrop.fade {
        opacity: 0;
      }
      .carousel-fade .carousel-item {
        opacity: 0;
        transition-property: opacity;
        -webkit-transform: none;
        transform: none;
      }
      .carousel-fade .carousel-item-next.carousel-item-left,
      .carousel-fade .carousel-item-prev.carousel-item-right,
      .carousel-fade .carousel-item.active {
        z-index: 1;
        opacity: 1;
      }
      .carousel-fade .active.carousel-item-left,
      .carousel-fade .active.carousel-item-right {
        z-index: 0;
        opacity: 0;
        transition: opacity 0s 0.6s;
      }
</style>

Add this to your `tabs.html` shortcode

<style>
    nav {
        display: block;
    }

    .nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .nav-tabs {
        border-bottom: 1px solid #dee2e6;
    }

    .nav-tabs .nav-item {
        margin-bottom: -1px;
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border-color: #e9ecef #e9ecef #dee2e6;
    }

    .nav-tabs .nav-link.disabled {
        color: #6c757d;
        background-color: transparent;
        border-color: transparent;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: #495057;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    .nav-fill .nav-item {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
    }

    .nav-tabs .dropdown-menu {
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .nav-justified .nav-item {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        text-align: center;
    }

    .nav-link {
        display: block;
        padding: 0.5rem 1rem;
    }

    .nav-link:focus,
    .nav-link:hover {
        text-decoration: none;
    }

    .nav-link.disabled {
        color: #6c757d;
        pointer-events: none;
        cursor: default;
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border-color: #e9ecef #e9ecef #dee2e6;
    }

    .nav-tabs .nav-link.disabled {
        color: #6c757d;
        background-color: transparent;
        border-color: transparent;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: #495057;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    .nav-pills .nav-link {
        border-radius: 0.25rem;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #fff;
        background-color: #007bff;
    }

    .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
    }

    .navbar-expand .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .navbar-light .navbar-nav .nav-link {
        color: rgba(0, 0, 0, 0.5);
    }

    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover {
        color: rgba(0, 0, 0, 0.7);
    }

    .navbar-light .navbar-nav .nav-link.disabled {
        color: rgba(0, 0, 0, 0.3);
    }

    .navbar-light .navbar-nav .active>.nav-link,
    .navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .nav-link.show,
    .navbar-light .navbar-nav .show>.nav-link {
        color: rgba(0, 0, 0, 0.9);
    }

    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.5);
    }

    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .nav-link:hover {
        color: rgba(255, 255, 255, 0.75);
    }

    .navbar-dark .navbar-nav .nav-link.disabled {
        color: rgba(255, 255, 255, 0.25);
    }

    .navbar-dark .navbar-nav .active>.nav-link,
    .navbar-dark .navbar-nav .nav-link.active,
    .navbar-dark .navbar-nav .nav-link.show,
    .navbar-dark .navbar-nav .show>.nav-link {
        color: #fff;
    }
</style>

Make sure you add both of these at the top of the shortcodes, and DO NOT overwrite the already existing code.

I'm not a developer, so if anyone can do this better, I am more than happy to oblige.

In conclusion:

What this does, it takes the CSS and JS that Dynamic Tabs relies on, and instead of overwriting it (this happened to my nav-bar), it will only use it for this shortcode.

Couldn't import the whole CSS because of the overwrite, so only took the important parts( I think? ).

rvanhorn commented 2 years ago

Hello,

How interesting, I'll take a look into the issue sometime soon and see what I can do. Thanks for letting me know and the solution you applied. :)

rvanhorn / hugo-dynamic-tabs