CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Ric Hubbard
Ric Hubbard

Reputation: 1

Bootstrap 3 Tabs not working

I am using the Tabs in Bootstrap 3 to separate related information on a web page. The code is:

<div class="tab-content">
    <div id="3users" class="tab-pane fade in active">
      <p class="price"><sup>$</sup>48.50<sub> /month</sub></p>
        <ul>
            <li>E-commerce Platform</li>
            <li>Business Reporting</li>
            <li>Event Booking</li>
            <li>Custom Web Apps</li>
        </ul>
        <p class="emph">plus everthing included in WebMarketing</p>
        <table width="75%" border="0">
            <tbody>
              <tr>
                <td>Users</td>
                <td class="td-right">3</td>
              </tr>
              <tr>
                <td>Emails</td>
                <td class="td-right">10</td>
              </tr>
              <tr>
                <td>Storage</td>
                <td class="td-right">1GB</td>
              </tr>
              <tr>
                <td>Bandwidth/Month</td>
                <td class="td-right">1TB</td>
              </tr>
              <tr>
                <td>Newsletters/Month</td>
                <td class="td-right">10,000</td>
              </tr>
              <tr>
                <td>SMS/Month</td>
                <td class="td-right">10</td>
              </tr>
            </tbody>
      </table>
    </div>
    <div id="5users" class="tab-pane fade in active">
      <p class="price"><sup>$</sup>73.50<sub> /month</sub></p>
        <ul>
            <li>E-commerce Platform</li>
            <li>Business Reporting</li>
            <li>Event Booking</li>
            <li>Custom Web Apps</li>
        </ul>
        <p class="emph">plus everthing included in WebMarketing</p>
        <table width="75%" border="0">
            <tbody>
              <tr>
                <td>Users</td>
                <td class="td-right">5</td>
              </tr>
              <tr>
                <td>Emails</td>
                <td class="td-right">20</td>
              </tr>
              <tr>
                <td>Storage</td>
                <td class="td-right">2GB</td>
              </tr>
              <tr>
                <td>Bandwidth/Month</td>
                <td class="td-right">1TB</td>
              </tr>
              <tr>
                <td>Newsletters/Month</td>
                <td class="td-right">10,000</td>
              </tr>
              <tr>
                <td>SMS/Month</td>
                <td class="td-right">10</td>
              </tr>
            </tbody>
      </table>
    </div>
    <div id="10users" class="tab-pane fade in active">
      <p class="price"><sup>$</sup>99.00<sub> /month</sub></p>
        <ul>
            <li>E-commerce Platform</li>
            <li>Business Reporting</li>
            <li>Event Booking</li>
            <li>Custom Web Apps</li>
        </ul>
        <p class="emph">plus everthing included in WebMarketing</p>
        <table width="75%" border="0">
            <tbody>
              <tr>
                <td>Users</td>
                <td class="td-right">10</td>
              </tr>
              <tr>
                <td>Emails</td>
                <td class="td-right">50</td>
              </tr>
              <tr>
                <td>Storage</td>
                <td class="td-right">5GB</td>
              </tr>
              <tr>
                <td>Bandwidth/Month</td>
                <td class="td-right">1TB</td>
              </tr>
              <tr>
                <td>Newsletters/Month</td>
                <td class="td-right">10,000</td>
              </tr>
              <tr>
                <td>SMS/Month</td>
                <td class="td-right">10</td>
              </tr>
            </tbody>
      </table>
    </div>
</div>

I am not sure why, when the page loads and displays all of the divs at once. when one of the tabs is clicked it starts to display only the related div.

I cannot figure out why the 2nd and 3rd are not being hidden on load.

I am using bootstrap-3.3.7.js and jquery-1.11.3.min.js and I am working with the latest version of Dreamweaver.

Thanks for the help

Upvotes: 0

Views: 185

Answers (2)

Kumar Nitesh
Kumar Nitesh

Reputation: 1652

It seems you are missing css and js(bootstrap as well as jquery file may be. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#3users">3 Users</a></li>
  <li><a data-toggle="tab" href="#5users">5users</a></li>
  <li><a data-toggle="tab" href="#10users">10users</a></li>
</ul>
<div class="tab-content">
  <div id="3users" class="tab-pane fade in active ">
    <p class="price"><sup>$</sup>48.50<sub> /month</sub></p>
    <ul>
      <li>E-commerce Platform</li>
      <li>Business Reporting</li>
      <li>Event Booking</li>
      <li>Custom Web Apps</li>
    </ul>
    <p class="emph">plus everthing included in WebMarketing</p>
    <table width="75%" border="0">
      <tbody>
        <tr>
          <td>Users</td>
          <td class="td-right">3</td>
        </tr>
        <tr>
          <td>Emails</td>
          <td class="td-right">10</td>
        </tr>
        <tr>
          <td>Storage</td>
          <td class="td-right">1GB</td>
        </tr>
        <tr>
          <td>Bandwidth/Month</td>
          <td class="td-right">1TB</td>
        </tr>
        <tr>
          <td>Newsletters/Month</td>
          <td class="td-right">10,000</td>
        </tr>
        <tr>
          <td>SMS/Month</td>
          <td class="td-right">10</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="5users" class="tab-pane fade ">
    <p class="price"><sup>$</sup>73.50<sub> /month</sub></p>
    <ul>
      <li>E-commerce Platform</li>
      <li>Business Reporting</li>
      <li>Event Booking</li>
      <li>Custom Web Apps</li>
    </ul>
    <p class="emph">plus everthing included in WebMarketing</p>
    <table width="75%" border="0">
      <tbody>
        <tr>
          <td>Users</td>
          <td class="td-right">5</td>
        </tr>
        <tr>
          <td>Emails</td>
          <td class="td-right">20</td>
        </tr>
        <tr>
          <td>Storage</td>
          <td class="td-right">2GB</td>
        </tr>
        <tr>
          <td>Bandwidth/Month</td>
          <td class="td-right">1TB</td>
        </tr>
        <tr>
          <td>Newsletters/Month</td>
          <td class="td-right">10,000</td>
        </tr>
        <tr>
          <td>SMS/Month</td>
          <td class="td-right">10</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="10users" class="tab-pane fade ">
    <p class="price"><sup>$</sup>99.00<sub> /month</sub></p>
    <ul>
      <li>E-commerce Platform</li>
      <li>Business Reporting</li>
      <li>Event Booking</li>
      <li>Custom Web Apps</li>
    </ul>
    <p class="emph">plus everthing included in WebMarketing</p>
    <table width="75%" border="0">
      <tbody>
        <tr>
          <td>Users</td>
          <td class="td-right">10</td>
        </tr>
        <tr>
          <td>Emails</td>
          <td class="td-right">50</td>
        </tr>
        <tr>
          <td>Storage</td>
          <td class="td-right">5GB</td>
        </tr>
        <tr>
          <td>Bandwidth/Month</td>
          <td class="td-right">1TB</td>
        </tr>
        <tr>
          <td>Newsletters/Month</td>
          <td class="td-right">10,000</td>
        </tr>
        <tr>
          <td>SMS/Month</td>
          <td class="td-right">10</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Upvotes: 1

Saa_keetin
Saa_keetin

Reputation: 655

You have active class on all the tab-panes which makes them all visible when you load. remove active class from all tab-panes except one that is supposed to visible on load.

<div class="tab-content">
				  <div id="3users" class="tab-pane fade in active">
				  	<p class="price"><sup>$</sup>48.50<sub> /month</sub></p>
					  <ul>
						  <li>E-commerce Platform</li>
						  <li>Business Reporting</li>
						  <li>Event Booking</li>
						  <li>Custom Web Apps</li>
					  </ul>
					  <p class="emph">plus everthing included in WebMarketing</p>
					  <table width="75%" border="0">
						  <tbody>
							<tr>
							  <td>Users</td>
							  <td class="td-right">3</td>
							</tr>
							<tr>
							  <td>Emails</td>
							  <td class="td-right">10</td>
							</tr>
							<tr>
							  <td>Storage</td>
							  <td class="td-right">1GB</td>
							</tr>
							<tr>
							  <td>Bandwidth/Month</td>
							  <td class="td-right">1TB</td>
							</tr>
							<tr>
							  <td>Newsletters/Month</td>
							  <td class="td-right">10,000</td>
							</tr>
							<tr>
							  <td>SMS/Month</td>
							  <td class="td-right">10</td>
							</tr>
						  </tbody>
					</table>
				  </div>
				  <div id="5users" class="tab-pane fade in ">
				  	<p class="price"><sup>$</sup>73.50<sub> /month</sub></p>
				  	  <ul>
						  <li>E-commerce Platform</li>
						  <li>Business Reporting</li>
						  <li>Event Booking</li>
						  <li>Custom Web Apps</li>
					  </ul>
					  <p class="emph">plus everthing included in WebMarketing</p>
					  <table width="75%" border="0">
						  <tbody>
							<tr>
							  <td>Users</td>
							  <td class="td-right">5</td>
							</tr>
							<tr>
							  <td>Emails</td>
							  <td class="td-right">20</td>
							</tr>
							<tr>
							  <td>Storage</td>
							  <td class="td-right">2GB</td>
							</tr>
							<tr>
							  <td>Bandwidth/Month</td>
							  <td class="td-right">1TB</td>
							</tr>
							<tr>
							  <td>Newsletters/Month</td>
							  <td class="td-right">10,000</td>
							</tr>
							<tr>
							  <td>SMS/Month</td>
							  <td class="td-right">10</td>
							</tr>
						  </tbody>
					</table>
				  </div>
				  <div id="10users" class="tab-pane fade in ">
				  	<p class="price"><sup>$</sup>99.00<sub> /month</sub></p>
				  	  <ul>
						  <li>E-commerce Platform</li>
						  <li>Business Reporting</li>
						  <li>Event Booking</li>
						  <li>Custom Web Apps</li>
					  </ul>
					  <p class="emph">plus everthing included in WebMarketing</p>
					  <table width="75%" border="0">
						  <tbody>
							<tr>
							  <td>Users</td>
							  <td class="td-right">10</td>
							</tr>
							<tr>
							  <td>Emails</td>
							  <td class="td-right">50</td>
							</tr>
							<tr>
							  <td>Storage</td>
							  <td class="td-right">5GB</td>
							</tr>
							<tr>
							  <td>Bandwidth/Month</td>
							  <td class="td-right">1TB</td>
							</tr>
							<tr>
							  <td>Newsletters/Month</td>
							  <td class="td-right">10,000</td>
							</tr>
							<tr>
							  <td>SMS/Month</td>
							  <td class="td-right">10</td>
							</tr>
						  </tbody>
					</table>
				  </div>
			  </div>

Upvotes: 0

Related Questions