Tabs won't function

[rudolfcm]

I took the markup from the guidelines on tabs ( http://bkoopman.github.io/tri/lists/tabs.html ) but although they're displayed properly, there is no "action" - meaning the content doesn't change when other tabs are clicked, nor are the "active" states.

Is there something I'm missing that still needs to be added?

Markup (untouched):

<div class="col-md-12">
    <ul class="tab-group nav nav-tabs">
        <li class="active"><a href="#Kennismaking" data-toggle="tab">Kennismakingsgesprek</a></li>
        <li><a href="#Opvolging" data-toggle="tab">Opvolging</a></li>
        <li><a href="#Beeldbellen" data-toggle="tab">Beeldbellen</a></li>
        <li><a href="#Bereikbaarheid" data-toggle="tab">Bereikbaarheid</a></li>
    </ul>
</div>

<div class="tab-content">
    <div class="tab-pane" id="Kennismaking">
      Tab One. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="tab-pane active" id="Opvolging">
      Tab Two. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div class="tab-pane" id="Beeldbellen">
      Tab Three. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="tab-pane" id="Bereikbaarheid">
      Tab Four. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

[bkoopman]

lets focus on http://sdl.github.io/dxa-html-design/lists/tabs.html, since the other site has an older design which might contain issues. But then my next question is, when are you experiencing this problem exactly, since on http://sdl.github.io/dxa-html-design/lists/tabs.html the tabs work fine, which means I cannot reproduce "Tabs won't function"

[rudolfcm]

Hi Bart,

we've implemented the tabs in a new DXA client site, where they do not function. Is there perhaps specific documentation on creating the tabs? As I indicated we've only copied the markup (HTML) and applied custom styling to it - is there a specific script (JS) that goes along with it?

Thanks, Rudolf

[bkoopman]

Let's post this as a question on http://tridion.stackexchange.com/ since you have an issue/question, but not discovered an issue in the product. I'll come back on that question and help you further.

[jhorsman]

Question on tridion.stackexchange: http://tridion.stackexchange.com/questions/14294/cant-get-tabs-to-work-in-dxa