um developing a website and that should has few tabs according to my dream,
but thing is when I click a tab it shows only contents which is between heading tag,not P tags, 
Here's my code.please help me to fulfill my dream :-D 

```html
<div class="panel panel-default">
  <div class="panel-body tabs">
    <ul class="nav nav-pills" data-tabs="tabs">
      <li class="active"><a href="#tab1" data-toggle="tab1">Tab1</a>
      </li>
      <li><a href="#tab2" data-toggle="tab">Tab2</a>
      </li>
      <li><a href="#tab3" data-toggle="tab">Tab3</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active" id="tab1">
        <h4>Heading1</h4>
        <p>text</p>
      </div>
      <div class="tab-pane fade" id="tab2">
        <h4>Heading2</h4> 
        <p>text</p>
      </div>
      <div class="tab-pane fade" id="tab3">
        <h4>Heading3</h4>
        <p>text</p>
      </div>
    </div>
  </div>
</div>
```