I'm attempting to create a table/grid using divs to show multiple tabs panels, side to side, this is for a car rental website.
I tried to use a row by row layout for the tab panels with a picture but the picture took up the entire row. I'm Displaying the Tab Panel as part static and part tab panel with Header first, Picture Second, and Tab Panels with prices and info third.
My problem is that the moment I put my tabs inside a table/ div table or any div that denotes the use of rows and columns, the tab panel will no longer show as tab panel. The Example Below is an altered example I used from http://jsfiddle.net/DHTTWL/jmdjpge0/ where I'm attempting to create a grid. What would be the best way to display tabs in table format?
<style>
.grid-container {
display : grid;
grid-template-columns: auto auto;
background-color: #2196F3;
padding: 10px;
}
</style>
<div class="grid-container">
<div class="grid-item">
<div id="tabs">
<ul>
<li><a href="#tabs-1">First Tab</a></li>
<li><a href="#tabs-2">Second Tab</a></li>
</ul>
<div id="tabs-1">
<p>Tabs in tab!</p>
<div id="more-tabs1">
<ul>
<li><a href="#nested-tabs-1">Child Tab 1</a></li>
<li><a href="#nested-tabs-2">Child Tab 2</a></li>
</ul>
<div id="nested-tabs-1"><p>Content here...</p></div>
<div id="nested-tabs-2"><p>More content here...</p></div>
</div>
</div>
<div id="tabs-2">
<p>Tabs in tab!</p>
<div id="more-tabs">
<ul>
<li><a href="#nested-tabs-1">Child Tab 1</a></li>
<li><a href="#nested-tabs-2">Child Tab 2</a></li>
</ul>
<div id="nested-tabs-1"><p>Content here...</p></div>
<div id="nested-tabs-2"><p>More content here...</p></div>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div id="tabs">
<ul>
<li><a href="#tabs-1">First Tab</a></li>
<li><a href="#tabs-2">Second Tab</a></li>
</ul>
<div id="tabs-1">
<p>Tabs in tab!</p>
<div id="more-tabs1">
<ul>
<li><a href="#nested-tabs-4">Child Tab 1</a></li>
<li><a href="#nested-tabs-5">Child Tab 2</a></li>
</ul>
<div id="nested-tabs-4"><p>Content here...</p></div>
<div id="nested-tabs-5"><p>More content here...</p></div>
</div>
</div>
<div id="tabs-2">
<p>Tabs in tab!</p>
<div id="more-tabs">
<ul>
<li><a href="#nested-tabs-6">Child Tab 1</a></li>
<li><a href="#nested-tabs-7">Child Tab 2</a></li>
</ul>
<div id="nested-tabs-6"><p>Content here...</p></div>
<div id="nested-tabs-7"><p>More content here...</p></div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#more-tabs" ).tabs();
$( "#more-tabs1" ).tabs();
});
</script>
This code renders the first tab but not the second, the second tabs end up showing in html format, should I use a second script for a second tab? I have a different script that is dynamic in the sense that you can add or remove tabs as you need to with all info however I\m experiencing the same problem of the tabs not all showing as they are designed.
