Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Help With Custom Panel Please

Can anyone tell me what I am doing wrong, and how to fix this. The marked items correlate to their tabs, but when I click on any tab, they all stay the same. I have tried several things to fix it, but they just get worse.

therealamerican.us/myimages/error.png

CodeDownload  
 </div>
 <div class="panel-body">
 <ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" data-toggle="tab">Messages</a></li>
 </ul>
 <div class="tab-content">
 <div class="tab-pane active" id="home"><div class="container-fluid">
 <h2>Weekly Highlights!</h2>
 <p>Check out our Weekly Relevant Highlights in the News.</p>
 <p></p>
 <div class="row">
 <div class="col-sm-4" style="background-color:lavender;"><div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">Middle aligned media</h4>
 ...
 </div>
</div></div>
   
 <div class="col-sm-4" style="background-color:lavenderblush;"><div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">Middle aligned media</h4>
 ...
 </div>
</div></div>
   
 <div class="col-sm-4" style="background-color:lavender;"><div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">Middle aligned media</h4>
 ...
 </div>
</div></div>
 <div class="tab-pane active" id="profile">...</div>
 <div class="tab-pane active" id="messages">...</div>
 <hr/>
 </div>
</div>

CodeDownload  

 <div class="panel-body">


<ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="home">
 <div class="container-fluid">
 <h2>Weekly Highlights!</h2>
 <p>Check out our Weekly Relevant Highlights in the News.</p>
 <p></p>
 <div class="row">
 <div class="col-sm-4" style="background-color:lavender;">
 <div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">Middle aligned media</h4>
 ...
 </div>
 </div>
 </div>
 <div class="col-sm-4" style="background-color:lavenderblush;">
 <div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">Middle aligned media</h4>
 ...
 </div>
 </div>
 </div>
 <div class="col-sm-4" style="background-color:lavender;">
 <div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">Middle aligned media</h4>
 ...
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="tab-pane active" id="profile">...</div>
 <div class="tab-pane active" id="messages">...</div>
 <hr/>
</div>

</div> <!--- closepanelbody-->



Count your divs.
Count my divs. Ok, confused.

Anyways, those dots still appear until you click on the next tab, plus when I add in the rest of the code, it adds 2 more rows to the bottom of the first tab, and has 3 rows on each of the other tabs.
CodeDownload  
<div class="first-div">
 <ul class="nav nav-tabs">
 <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
 <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
 </ul> <!-- nav -->

 <div class="tab-content">
 <div class="tab-pane active" id="tab1">
 YOUR HTML
 </div> <!-- tab1 -->

 <div class="tab-pane" id="tab2">
 YOUR HTML
 </div> <!-- tab2 -->
 </div> <!-- tab-content -->
</div> <!-- first-div -->

Thread Information
Author
Replies
4 posts
Views
110 times
Last Post
Last updated on 1 month ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Chan, Vyper69, RobiNN