0

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?

Frank
  • 89
  • 2
  • 12

1 Answers1

4

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.

Tim Lewis
  • 27,813
  • 13
  • 73
  • 102
  • That fixed it!! I also changed the code in the function to be a:first to display the first item in the list as the default instead of the last. Thank you very much, – Frank Apr 22 '15 at 15:02
  • No problem. Feel free to add this as the accepted answer so others can potentially benefit from your question. – Tim Lewis Apr 22 '15 at 15:08