Display Articles in Tabs

Support
1

I want to display certain articles within tabs.
Ex… Click on Tab one and a grid of specific articles show then click on Tab Two and the first tab collapses and the new tab shows different grid if articles. Can this be done?

2

Can you be a bit more specific with what you’re trying to achieve? Is this on the front end or back end? When you say article do you mean resources or something else?

In either case it sounds like you mean you want to display an accordion, rather than tabs. If this is on the front end then one way you can achieve this is to use pdoResource calls with filters in the accordion bodies to display the different collections.

3

Yes. I want an accordion like this: https://codepen.io/chrisgosling/pen/nmaIb

But I want my articles : http://sorghumcheckoff.com/news-and-media/presentations to show up inside the tabs

4

Assuming you’re using the same accordion markup and script as the codepen example then you would just need to place your pdoResource calls inside each body, ‘tabs’.

note: to most developers ‘tabs’ refers to a different common web component, like accordions.

<div class="narrowchart">
	<div id="accordion">

		<!-- Accordion #1 Start -->
		<div class="accordianheader">
			<h3>BHMP<i class="fa fa-angle-down"></i></h3>
		</div>
		<div class="accordianbody">
			<!-- Put your pdoResources/getResources call here -->
			[[!pdoResources? 
				&parents=`1` 
				<!--  ^^ Assuming you've put your articles in their own folders just replace this parent id with the id you want to pull from. ie: if 'crop improvement' is a resource, and it has child resources (articles) then put in the id for crop improvement for this call. -->
				&tpl=`myChunkTpl` 
				<!-- ^ ^ The chunk you're using to display the article markup -->
			]]
		</div>
		<!-- Accordion #1 End -->

		<!-- Accordion #2 Start -->
		<div class="accordianheader">
			<h3>BHMP<i class="fa fa-angle-down"></i></h3>
		</div>
		<div class="accordianbody">
			<!-- Your second call  -->
			[[!pdoResources? 
				&parents=`2` 
				&tpl=`myChunkTpl` 
			]]
		</div>
		<!-- Accordion #2 End -->

		<!-- .. repeat as necessary .. -->

	</div>
</div>
5

Thanks! I will try this. I’m not picky, I could use tabs or an accordion.