bootstrap pill not "tabbing" content

Question

I am setting up bootstrap pills on a page and am using the http://getbootstrap.com/javascript/#tabs-usage standard formula but I'm getting the function is not a valid function error message. I have:

<ul class="nav nav-pills" role="pilllist" id="myPill">
    <li role="presentation" class="active"><a href="#all" aria-controls="all" role="pill" data-toggle="pill">Show all</a></li>
    <li role="presentation"><a href="#car" aria-controls="car" role="pill" data-toggle="pill">Cars</a></li>
</ul>

<div class="pill-content">
    <div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
    <div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>

<script>
    $(function () {
        $('#myPill a:last').pill('show')
    })
</script>

Why am I getting this error message?

Answer 1

You're using .pills('show'); where you should be using .tab('show'); as seen below:

$(function () {
  $('#myPill a:last').tab('show')
});

Also, your HTML is incorrect for pills:

<ul class="nav nav-pills" role="tablist" id="myPill">
  <li role="presentation" class="active"><a href="#all" aria-controls="home" role="tab" data-toggle="tab">Show All</a></li>
  <li role="presentation"><a href="#cars" aria-controls="profile" role="tab" data-toggle="tab">Cars</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="all">Sample of All</div>  
  <div role="tabpanel" class="tab-pane" id="cars">Sample for Cars</div>
</div>

Basically, the only mentions of pill you should have is your ID (as its name doesn't matter) and .nav-pills. Everything else should be tab, ie tabpanel, .tab-pane, etc.

Lastly, the reason you're getting an undefined function error is that .pills() isn't a fucntion.

Take a look at this Bootply to see how the tabs work.