Creating a Dynamic Tabbed Contents that contain accordions with specific IDs using Piklist (Screenshot)

Creating a Dynamic Tabbed Contents that contain accordions with specific IDs using Piklist

// creating metaboxes using piklist 

  piklist('field', array(
    'type' => 'text'
    ,'field' => 'tabs'
    ,'add_more' => true
    ,'label' => __('Add new tab', 'worksfire')
  ));
		
	$tabs = get_post_meta($post->ID, 'tabs'); // get a of the tabs in an array
								
  piklist('field', array(
    'type' => 'group'
    ,'field' => 'faq_tabbed_questions'
    ,'label' => __('FAQ Tabbed Questions', 'worksfire') 
    ,'columns' => 12
    ,'add_more' => true
    ,'fields' => array(
          array(
            'type' => 'select'
            ,'field' => 'tab_category'
            ,'label' => __('Category', 'worksfire')
            ,'columns' => 2
            ,'choices' => $tabs
          )
		  
		  ,array(
            'type' => 'text'
            ,'field' => 'tab_question'
			,'label' => __('Question', 'worksfire')
            ,'columns' => 4
            ,'attributes' => array(
              'placeholder' => 'What is Unify Template?'
            )
          )	
		  ,array(
            'type' => 'textarea'
            ,'field' => 'tab_answer'
			,'label' => __('Answer', 'worksfire')
            ,'columns' => 4
            ,'attributes' => array(
              'placeholder' => 'Answer goes here'
            )
          )

      )
  
    )
  );
  
  
  // convert a string (titles) into 10 charac length css selector

	function truncate($string, $length) {
		$stripped = preg_replace('/\W+/','',strtolower(strip_tags($string)));
		return (strlen($stripped) > $length) ? substr($stripped, 0, 10) : $stripped;
	}
  
   
  // getting the tabbed content as expected format

            <div class="col-md-6">
			
		<!-- Begin Tab v1 -->
		<div class="tab-v1">

			<ul class="nav nav-tabs margin-bottom-20">
			<?php 
				 $tabs = get_post_meta($post->ID, 'tabs');
				 //var_dump($tabs);
				 
					if($tabs) {
						foreach ($tabs as $key=>$tab) {
						
						$tab_id = truncate($tab,15);
						$active = ($key == 0 ) ? 'class="active"' : '';
						
						echo '<li '.$active.'><a data-toggle="tab" href="#'.$tab_id.'">'.$tab.'</a></li>';
						
						}
					} else {
						echo 'No tabs added yet!';
					}
			?>

			</ul>    
			

			
	<div class="tab-content">
	<!-- Tab Content 1 -->
	
	<?php 
				 $pane_tabs = get_post_meta($post->ID, 'tabs');
				 //var_dump($pane_tabs);

						foreach ($pane_tabs as $key=>$tab) {
						
						//var_dump($key . '=' . $tab );
						
						$tab_id = truncate($tab,15);
						$active_in = ($key == 0 ) ? 'active in' : '';
						
						echo '<div id="'.$tab_id.'" class="tab-pane fade '.$active_in.'">
							<div id="accordion-v1" class="panel-group acc-v1">';
						
						$faq_tabbed_questions = parse_piklist_array(get_post_meta(get_the_ID(), 'faq_tabbed_questions', true));
						
						$criteria = array("tab_category" => $key);
						$showable_questions = wp_list_filter($faq_tabbed_questions, $criteria );
						 if($showable_questions) {
							foreach($showable_questions as $tbq) {
							$tab_question = $tbq['tab_question'];
							$question_id = truncate($tab_question,15);
							$tab_answer = $tbq['tab_answer'];
							echo '<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a href="#'.$question_id.'_'.$key.'" data-parent="#accordion-v1" data-toggle="collapse" class="accordion-toggle collapsed">
											'.$tab_question.'
										</a>
									</h4>
								</div>
								<div class="panel-collapse collapse" id="'.$question_id.'_'.$key.'">
									<div class="panel-body">
										'.$tab_answer.'
									</div>
								</div>
							</div>';
								
							}
						 } else {
							 echo 'No question in this category';
						 }
							
						echo '</div></div>';
						}

				
					
					
			?>
							 
	</div>
		</div>
 
        </div><!--/col-md-6-->

Short Explanation:

Admin section with metaboxes

Output

The gist is here :

$faq_tabbed_questions = parse_piklist_array(get_post_meta(get_the_ID(), 'faq_tabbed_questions', true)); $criteria = array("tab_category" => $key); $showable_questions = wp_list_filter($faq_tabbed_questions, $criteria );

This concept is similar to my previous gist 'Getting All Contact Form 7 Forms in a Select Option and Showing Selected Form Anywhere Wordpress' here: https://gist.github.com/azizultex/f0b1aae10279c9a7233d

https://gist.github.com/azizultex/180b3d1c98d2dfea6424