Featured post in bootstrap 5 nav-pill

Question

Hi guys I am trying to create a featured post in bootstrap nav-pill, with categories. When I click on category it shows 5 contents of the category in two separate divs and takes the first article as a featured article.

The problem is: First $tab_content is ok, which is first post as featured.

But second $tab_content displaying this

multiple times. so it doesn't go inline.

it should be like this :

5 contents in here

Edit First tab_content which is first article goes in this:

Second tab_content which is displaying 5 articles goes in this:

Here are codes:

$categories =   array(
  array('tab_title'=>'catName-1'),
  array('tab_title'=>'catName-2'),
  array('tab_title'=>'catName-3'),
  array('tab_title'=>'catName-4')
);

$tab_menu = '';
$tab_content = '';
$i = 0;
  foreach($categories as $row){
    if($i == 0){
      $tab_menu .= '  '.$row["catName"].'  ';
      $tab_content .= '';
    } else {
      $tab_menu .= ' '.$row["catName"].' ';
      $tab_content .= '';
    }
    

$articles = array(
  array('post_title'=>'some text for title'),
  array('catId'=>'40'),
  array('post_desc'=>'some text for post content'),
  array('catName'=>'category name'),
  array('post_seo_url'=>'sitecom/post_url'),
  array('post_image'=>'sitecom/images/image'),
);

      $first = true;
      foreach($articles as $sub_row){
      if ($first == true) { 
      if (!empty($row['post_video_url']) OR !empty($row['post_video_embed_code'])) { 
          $show = '
                  
                  8.5
                  
                  ';
      } else {
          $show = '';
      }
        $tab_content .= '
       
        
            
            
              '.$show.'
                
                  '.$sub_row['catName'].'
                
              
                '.$sub_row['post_title'].'
                
                
                  
                    by '.$sub_row['username'].'
                    
                  
                  '.$sub_row['post_created_at'].'
                
              
            
          
        ';
        
        $first = false;
        } else {
        $tab_content .= '
      
        
            
              
                
              
              
                '.$sub_row['post_title'].'
                by '.$sub_row['username'].' - '.time_elapsed_string($sub_row['post_created_at']).'
              
            
          
        ';
          }
       }
      $tab_content .= '';
      $i++;
  }

This is Usage :

thanks in advance for all helps.

user_9779552 · Answer

I hope this answer would help you. I rearranged your categories and articles arrays since some data are not available on the array. and also added if condition inside articles foreach loop to print relevant category tab data.










'catName-1','catId'=>1,'catName'=>'catName-1'),
  array('tab_title'=>'catName-2','catId'=>2,'catName'=>'catName-2'),
  array('tab_title'=>'catName-3','catId'=>3,'catName'=>'catName-3'),
  array('tab_title'=>'catName-4','catId'=>4,'catName'=>'catName-4')
);

$tab_menu = '';
$tab_content = '';
$i = 0;

  foreach($categories as $row){
    if($i == 0){
      $tab_menu .= '  '.$row["catName"].'  ';
      $tab_content .= '';
    } else {
      $tab_menu .= ' '.$row["catName"].' ';
      $tab_content .= '';
    }
 
$articles = array(
  array(
  'post_title'=>'some text for title cat1',
  'post_id'=>'1',
  'catId'=>'1',
  'post_desc'=>'some text for post content',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
  array(
  'post_title'=>'some text for title cat 2',
  'post_id'=>'1',
  'catId'=>'2',
  'post_desc'=>'some text for post content',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
  array(
  'post_title'=>'some text for title cat3',
  'post_id'=>'1',
  'catId'=>'3',
  'post_desc'=>'some text for post content cat3',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
  array(
  'post_title'=>'some text for title cat4',
  'post_id'=>'1',
  'catId'=>'4',
  'post_desc'=>'some text for post content cat4',
  'catName'=>'category name',
  'post_seo_url'=>'sitecom/post_url',
  'post_image'=>'sitecom/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
);

      $first = true;
      foreach($articles as $sub_row){

       if($sub_row['catId'] == $row['catId']){

                if ($first == true) { 
              
                      if (!empty($row['post_video_url']) OR !empty($row['post_video_embed_code'])) { 
                          $show = '
                                  
                                  8.5
                                  
                                  ';
                      } else {
                          $show = '';
                         
                      }
              
                    $tab_content .= '
                   
                    
                        
                        
                          '.$show.'
                            
                              '.$sub_row['catName'].'
                            
                          
                            '.$sub_row['post_title'].'
                            
                            
                              
                                by '.$sub_row['username'].'
                                
                              
                              '.$sub_row['post_created_at'].'
                            
                          
                        
                      
                    ';
                    
                    $first = false;
                
                } else {
                
                    $tab_content .= '
                      
                        
                            
                              
                                
                              
                              
                                '.$sub_row['post_title'].'
                                by '.$sub_row['username'].' - '.$sub_row['post_created_at'].'
                              
                            
                          
                        ';
                  }
              }
       }
      $tab_content .= '';
      $i++;

  }
?>

Featured post in bootstrap 5 nav-pill

1 Answers