i have hubdb data as shown in below image
if i click on tab one data only tab-1 data should display, same for tab 2, how to do it or how to match the id’s of different rows with tab, out put image is shown below.
Couldn’t you, instead of using a multi-select for the first column, use a single select next to each of the texts? That way, you would have the tab1 name next to the tab1 text etc. I assume you will use JavaScript to get the buttons/tabs to work?
@Hey @Raghavendra
Could you ellaborate just a little more on the use case and why you’ve chosen the multi-select column rather than @GregSamsa sugested single select? Very curious to see what comes of this
it’s a blog list and post page as shown in below image,
if i click on list it should go to post page, again in that tabs as shown in above image, in that tab if i clicked on specific tab that tab releated data should apper.
the code is
<div class=“skillMainBlock”>
{% for skillTab in dynamic_page_hubdb_row.skills_tab %}
<div class=“skillTab tab-link” data-tab=“{{ skillTab.id }}” >
<p>{{ skillTab.name }}</p>
</div>
{% endfor %}
</div>
<div class=“skillOne tab-content active” id=“tab-1”>
{{ dynamic_page_hubdb_row.skills_one }}
</div>
<br>
<div class="skillTwo tab-content"id=“tab-2”>
{{ dynamic_page_hubdb_row.skills_two }}
</div>
<br>
<div class=“skillThree tab-content” id=“tab-3”>
{{ dynamic_page_hubdb_row.skills_three }}
</div>
<br>
<div class=“skillFour tab-content” id=“tab-4”>
{{ dynamic_page_hubdb_row.skills_four }}
</div>
------------Js-----------
<script>
$(‘.tab-link’).click( function() {
//
var tabID = $(this).attr(‘data-tab’);
console.log(tabID)
$(this).addClass(‘active’).siblings().removeClass(‘active’);
$(‘#tab-’+tabID).addClass(‘active’).siblings().removeClass(‘active’);
});
</script>
<div class=“skillOne tab-content active” id=“tab-1”>
{{ dynamic_page_hubdb_row.skills_one }}
</div>
now i added tab-1, tab-2… manualy, i want that to be added automaticaly