My current challenge involves creating vertical tabs using materialize CSS, specifically in regards to positioning. The desired outcome is for the content to align at the same level when clicking on TAB 3. An example of the expected result can be seen in the following image: https://i.sstatic.net/KKVll.jpg
Below is my HTML code:
<div class="container">
<div class="row">
<div class="col m4">
<ul class="tabs">
<li class="tab"><a href="#test1">Tab 1</a></li>
<li class="tab"><a class="active" href="#test2">Tab 2</a></li>
<li class="tab"><a href="#test3">Tab 3</a></li>
<li class="tab"><a href="#test4">Tab 4</a></li>
<li class="tab"><a href="#test5">Tab 5</a></li>
<li class="tab"><a href="#test6">Tab 6</a></li>
</ul>
</div>
<div class="col m8">
<div id="test1" class="col tab-content">Tab 1</div>
<div id="test2" class="col tab-content">Tab 2</div>
<div id="test3" class="col tab-content">Tab 3</div>
<div id="test4" class="col tab-content">Tab 4</div>
<div id="test5" class="col tab-content">Tab 4</div>
<div id="test6" class="col tab-content">Tab 4</div>
</div>
</div>
</div>
And here is the corresponding CSS:
.tabs{
height: auto;
white-space: normal;
}
.tab{
display: block;
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.tab-content{
height: 200px;
width: 100%;
background: #fcfcfc;
border:1px solid #f0f0f0;
}
.indicator{
display: none;
}