Display posts as tab

You can make a child theme and have a category-xx.php template file for that category, changing the markup to be in tabs (or use <detail><summary>).
Or you could have the child theme category page load a Javascript that makes the existing markup behave like tabs.

Hi, thanks for your answer.
Finally I’ve made my own way depending on the most suitable solution for my context.
So I create a function to be called by shortcode in any page or post.

The shortcode can be used like this:
[bhs-display-post-by-category-as-tab category=”your category ID”]

Here is the details of the process if it can helps someone too:

1) in functions.php of the theme or child theme:

function bhs_scripts() {
	wp_enqueue_script( 'openTab', get_template_directory_uri() . '/js/bhs-tab-custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'bhs_scripts', 999 );

function BenhancedStudio_display_post_by_category_as_tab($atts, $content = null) {
    extract(shortcode_atts(array(
        "nb" => '50',
        "orderby" => 'post_date',
        "order" => 'DESC',
        "category" => '1'
    ), $atts));
    
	global $post;
    $tmp_post = $post;
    $myposts = get_posts('showposts='.$nb.'&orderby='.$orderby.'&category='.$category);

	$counter = 0;
	
	$tabstitles = '<div class="tab">';
	$tabcontents = "";
	$out = '<div class="bhs-tab-globalcontainer">';
	
	foreach($myposts as $post){
		setup_postdata( $post );
		$counter++;
		$tabstitles .= '<button class="tablinks" onclick="openTab(event, \''.the_title("","", false).'\')">'.the_title("","", false).'</button>';
		
		$content = get_the_content();  
		$content = apply_filters('the_content', $content);
		$content = str_replace(']]>', ']]>', $content);
		$tabcontents .= '<div id="'.the_title("","", false).'" class="tabcontent">';
		
		// If you want the featured image ***********
		$tabcontents .= '<div class="bhs-tab-globalcontainer-thumbail">'.get_the_post_thumbnail( $post->ID, 'full', array('class' => 'bhs-tab-globalcontainer-img aligncenter wp-post-image') ).'</div>';
		// ******************************************

		$tabcontents .= $content;
		$tabcontents .= '</div>';
	};
	
	$tabstitles .= '</div>';
	
	if ($counter == 0) {
		$out = '<div><h2>Aucun article n&apos;a &eacute;t&eacute; trouv&eacute; pour la cat&eacute;gorie choisie...</h2></div>';
	}
	else {
		$out .= $tabstitles;
		$out .= $tabcontents;
		$out .= '</div>';
	}

    wp_reset_postdata();
    $post = $tmp_post;
    return $out;
}
add_shortcode("bhs-display-post-by-category-as-tab", "BenhancedStudio_display_post_by_category_as_tab");

2) The javascript file bhs-tab-custom.js:

function openTab(evt, tabName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

window.onload = function(){
  document.getElementsByClassName("tablinks")[0].click();
}

3) CSS:

.bhs-tab-globalcontainer {
		display: inline-block;
}

.bhs-tab-globalcontainer .tab {
  float: left;
  border: 1px solid #ccc;
	border-right: none;
  background-color: #f1f1f1;
  width: 20%;
  height: auto;
}

.bhs-tab-globalcontainer .tab button {
  display: block;
  background-color: inherit;
	font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: black;
  padding: 10px;
  width: 100%;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.6s;
	border-bottom: 1px solid #ccc;
}

.bhs-tab-globalcontainer .tab button:hover {
  background-color: #ddd;
}

.bhs-tab-globalcontainer .tab button.active {
  background-color: #888888;
	color: #fff;
}

.bhs-tab-globalcontainer .tab button.active:after {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 100%;
    content: " ";
    height: 0;
    width: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #888888;
    z-index: 100;
}

.bhs-tab-globalcontainer .tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 80%;
  height: auto;
	padding: 24px;
	background-color: #f5f5f5;
}

.bhs-tab-globalcontainer-thumbail {
		margin-bottom: 25px;
    max-height: 350px;
    display: flex;
}

.bhs-tab-globalcontainer-img {
		object-fit: contain;
}

With this sample, the display may not be fully responsive, so you can adjust it with CSS media, as it often depends on the theme responsivity.

• This reply was modified 4 years, 5 months ago by bendev.
• This reply was modified 4 years, 5 months ago by bendev.