Title: Display posts as tab
Last modified: September 25, 2020

---

# Display posts as tab

 *  Resolved [bendev](https://wordpress.org/support/users/bendev/)
 * (@bendev)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/display-posts-as-tab/)
 * Hi,
 * I’m trying to find a way (code or plug-in) to display posts of a specific category
   as tab.
    I mean that each post should be displayed as one tab (vertical tab should
   be better to manage potential high quantity of posts). So for each tab, the title
   of the tab will be the title of the post, and the content of the tab will be 
   the content of the post.
 * There are many of plugs-in to display posts of a specific category in a tab, 
   but that’s not what I’m looking for here.
 * Any suggestion, clue or idea to start somewhere?
    -  This topic was modified 5 years, 8 months ago by [bendev](https://wordpress.org/support/users/bendev/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/display-posts-as-tab/#post-13454866)
 * 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.
 *  Thread Starter [bendev](https://wordpress.org/support/users/bendev/)
 * (@bendev)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/display-posts-as-tab/#post-13458316)
 * 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 5 years, 8 months ago by [bendev](https://wordpress.org/support/users/bendev/).
    -  This reply was modified 5 years, 8 months ago by [bendev](https://wordpress.org/support/users/bendev/).

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Display posts as tab’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 2 replies
 * 2 participants
 * Last reply from: [bendev](https://wordpress.org/support/users/bendev/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/display-posts-as-tab/#post-13458316)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics