Get Multiple Collapsible Tabs Using Tablepress
Many of you tried for adding multiple collapsible tabs using different plugin but it is not possible to add multiple collapsible tab. if you are using tablepress plugin for adding collapsible data in your website in the tab format then the collapsible data add only in first tab or accept only one tab for collapse but if you want to add it for multiple tab or Accordion then it will not accept the data in collapse format.
Why we can not add collapsible data into multiple tabs -
There are two issues here:
1) The collapse mode won’t work nicely inside those Accordion tabs. The reason for that is that the table is initially hidden, which means that the JavaScript code can not calculate things like column widths, etc., because hidden elements don’t have one
2) The reason why it didn’t work on an empty page is that your tables use the #colspan# feature to merge/combine cells (e.g. in the first row). Unfortunately, the external JavaScript library requires that there are no merged/combined cells in the table, so that you would have to remove all #colspan# to make it work.
Even the author of the tablepress plugin said that we can not add collapsible data in tabs further we can use scroll instead of collapse.
But Still we can add collapsible tabs using tablepress plugin —
For adding tab most commonly used method is to install any tab plugin like WP Tab Widget, Wonder Tabs or elementor tab, etc.. and add the tablepress shortcode in tab but this is wrong method for adding collapse Because the tab plugin contain the javascript code and it can not fetch column and width.
Solution -
Write Pure Html and Css code for tabs
Steps for adding collapsible tab using tablepress-
1- Add data into tablepress
2-In your page builder add Pure html and Css Code of tab
3-use the collapsible tablepress short code Example — [table id=123 responsive=Collapse /]
Add the tablepress short code in these code
HTML
<ul class=”tabs”>
<li class=”tab”>
<input type=”radio” name=”tabs” checked=”checked” id=”tab1" />
<label for=”tab1">Academic Research</label>
<div id=”tab-content1" class=”content”>
<h1>Academic Research</h1>
<hr/>
<br/>
<p>[table id = 1 responsive=collapse /]</p>
</div>
</li>
<li class=”tab”>
<input type=”radio” name=”tabs” id=”tab2" />
<label for=”tab2">Business Consultancy</label>
<div id=”tab-content2" class=”content”>
<h1>Business Consultancy</h1>
<hr/>
<br/>
<p>[table id = 2 responsive=collapse /]</p>
</div>
</li>
CSS
<style>
* {
margin: 0;
padding: 0;
}
h1, h3{
text-transform: uppercase;
font-weight: normal;
}
.tabs{
width: 1000px;
display: block;
margin: 40px ;
position: relative;
}
.tabs .tab{
float: left;
display: block;
}
.tabs .tab>input[type=”radio”] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs .tab>label {
display: block;
padding: 6px 21px;
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
position: relative;
color: #FFF;
background: #4A83FD;
}
.tabs .content {
z-index: 0;/* or display: none; */
overflow: hidden;
width: 750px;
padding: 25px;
position: absolute;
top :460px ;
left: 0;
background: white;
color: black;
opacity:0;
transition: opacity 400ms ease-out;
}
.tabs>.tab>[id^=”tab”]:checked + label {
top: 0;
background: #303030;
color: #F5F5F5;
}
.tabs>.tab>[id^=”tab”]:checked ~ [id^=”tab-content”] {
z-index: 1;/* or display: block; */
opacity: 1;
transition: opacity 400ms ease-out;
}
</style>
You will get it output for collapsible tab using Tablepress
Reference Website -
