Data-toggle with Flask & Jinja template

Question

I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:

<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Pick Colors</a>
    </li>
    <li><a href="#tab2" data-toggle="tab2">Add Text</a>
    </li>
    <li><a href="#tab3" data-toggle="tab3">Add Logos</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <div class="well">
            <ul class="nav">
                <li class="color-preview" title="White" style="background-color:#ffffff;"></li>
            </ul>
        </div>
    </div>
    <div class="tab-pane" id="tab2">
        <div class="well">
            <div class="input-append">
                <input class="span2" id="text-string" type="text" placeholder="add text here...">
                <button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
                </button>
                <hr>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="tab3">
        <div id="avatarlist">
            <img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
        </div>
    </div>
</div>

When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?

I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.

Answer 1

I just fixed it. The issue was that

<li><a href="#tab2" data-toggle="tab2">Add Text</a>
</li>
<li><a href="#tab3" data-toggle="tab3">Add Logos</a>

Should've said data-toggle="tab" instead of tab#.