Hello all. I wanted to try & implement in the sidebar, two tabs.
the main tab w/an accordion & search & what not…in the second tab a contact form.
using a plugin “easy contact forms”
so…so far so good (have not actually added the form yet to the second tab…)
but i tried text…still doesn’t show up.
http://danielamorescalchi.com/testarea2/about-us/
is this the css?
Thank you
D
Hi,
Where is the js for the tabs?
I couldn’t see it but you may have packaged it up somewhere.
using bootstrap. the same js that worked for the accordion should work for the tabs…
Hi,
You have mismatched tags on the tab panes and you have the ids on the wrong elements. The ids should be on the elements with a class of .tab-pane and not nested inside it.
e.g.
<div id="mailTab" class="tab-pane ">
<div> hello</div>
<!-- end mailTab -->
</div>
You have also closed the tab-content div around the first tab so the second one is never seen. There is also an unclosed comment which is making a closing div disappear. However the closing div is erroneous anyway and shouldn’t be there.
Here is the correct structure for that section.
<ul class="nav nav-tabs">
<li><a style="color:blue;" href="#mainTab" data-toggle="tab">main</a></li>
<li><a style="color:red;" href="#mailTab" data-toggle="tab">contact</a></li>
</ul>
<div class="tab-content">
<div id="mainTab" class="tab-pane fade active in">
<div>
<div class="search-box">
<form role="search" method="get" class="search-form" action="http://danielamorescalchi.com/testarea2/">
<label> <span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
</div>
<div id="soc-media-main"> <img id="gPlus" src="http://danielamorescalchi.com/testarea2/wp-content/themes/apdSilencers/imgs/gPlusLogo.png" alt="gPlus"/> <img id="fb" src="http://danielamorescalchi.com/testarea2/wp-content/themes/apdSilencers/imgs/fbLogo.png" alt="fb"/> <img id="twt" src="http://danielamorescalchi.com/testarea2/wp-content/themes/apdSilencers/imgs/twitterLogo.png" alt="twt"/> </div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> APD- Peerless Product Development </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body"> Asymmetric Product Development (APD) is a convergence of design and manufacturing professionals focused on developing next generation products that are technically flawless, astutely designed and that succinctly address the detailed interface needsof the user. Integrity is the cornerstone of our operation. We believe integrity creates a better product and is the only way of doing business. Our goal is to leverage our development and manufacturing prowess to develop leading edge products that exceed the expectations of our customers and conduct our business in a manner that is professional and profitable. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> NIHL (Noise Indueced Hearing Loss) </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h3>Firearms Are Loud</h3>
<p>Exposure to noise greater than 140 dB can permanently damage hearing. Almost all firearms create noise that is over the 140-dB level. A small .22-caliber rifle can produce noise around 140 dB, while big-bore rifles and pistols can produce sound over 175 dB...
<p><a href="index.php?p=61" target="_blank" class="btn btn-primary">Read full article</a></p>
</div>
</div>
</div>
<!-- End panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Schedule a demo </a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> We'd love to meet you and show you our work </div>
</div>
</div>
<!-- End panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Video demo </a> </h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="thumbnail"> <a href="https://www.youtube.com/watch?v=FwlenkTi_tg" target="_blank"><img src="http://danielamorescalchi.com/testarea2/wp-content/themes/apdSilencers./imgs/223-r-15.png" alt="223-r-15" title="r-15 demo" class="image-responsive"> </a>
<p class="caption">Full Auto APD suppressor Equipped 223-AR15 Rifle</p>
</div>
<!-- end thumbnail div -->
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="thumbnail"> <a href="https://www.youtube.com/watch?v=rIE6hP2Li3Q" target="_blank"><img src="http://danielamorescalchi.com/testarea2/wp-content/themes/apdSilencers./imgs/22-pistol.png" alt="22-pistol" title="22-pistol demo" class="image-responsive"></a>
<p class="caption">.22 pistol suppressor demo</p>
</div>
<!-- end thumbnail div -->
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="thumbnail"> <a href="https://www.youtube.com/watch?v=4dkZqfAxIBE" target="_blank"><img src="http://danielamorescalchi.com/testarea2/wp-content/themes/apdSilencers./imgs/700-308.png" alt="700-308" title="308 caliber demo" class="image-responsive"></a>
<p class="caption">Suppressed Remington model in .308 caliber</p>
</div>
<!-- end thumbnail div -->
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="thumbnail"> <a href="https://www.youtube.com/watch?v=7NqucbFk0Eg" target="_blank"><img src="http://danielamorescalchi.com/testarea2/wp-content/themes/apdSilencers./imgs/22-rifle.png" alt="22-rifle" title="22-rifle demo" class="image-responsive"></a>
<p class="caption">.22 rifle suppressor demo</p>
</div>
<!-- end thumbnail div -->
</div>
</div>
</div>
</div>
<!-- End panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix"> Blog </a> </h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body"> Hanging out with our friend in law enforcement at our company bbq. </div>
</div>
</div>
<!-- End panel -->
</div>
<!-- end accordion -->
</div>
<!-- end inner div -->
</div>
<!-- end mainTab tab-pane -->
<div id="mailTab" class="tab-pane ">
<div> hello</div>
</div>
<!-- end mailTab tab-pane -->
</div>
<!-- end tab-content -->
Thank you Paul will go try it out!
Thank you for your help Paul, that worked!
D