Develop FAQ section with shortcode only – no custom post type, no plugin

In a previous post, I described how you can manage the FAQ section with custom post type. In this article, I am going to show you how you can manage the FAQ section with shortcode only. You don’t need to register any custom post type to do this.

We will follow the steps below
1. Create the shortcode
2. Add CSS and JS code

Create the shortcode

Paste the code below in your active theme’s functions.php file

function faqs_fn( $atts, $content = null ) {
	return '<div class="accordion">' . do_shortcode($content) . '</div>';
}
add_shortcode( 'faqs', 'faqs_fn' );


function faq_item_fn($atts){
    ob_start();
    $data = shortcode_atts( array(
	'title' => 'My Title',
	'desc' => 'My Description',
), $atts );
?>

<div class="accordion-single acc-close">
<div class="accordion-title"><?php echo $data['title']; ?><span class="plus">+</span></div>
<div class="accordion-content"><?php echo $data['desc']; ?></div>
</div>

<?php

return ob_get_clean();

}

add_shortcode( 'faq_item', 'faq_item_fn' );

Add css and javascript code

Next create two files in the root directory of your current theme.
1. wpeng-accordion-style.css
2. wpeng-accordion-script.js

Now we will enqueue these scripts.

add_action('wp_enqueue_scripts', 'accordion_js_css');
function accordion_js_css() {

    wp_register_script('wpeng-accordion-script', get_template_directory_uri().'/wpeng-accordion-script.js', array(), false, true);

    wp_enqueue_script('wpeng-accordion-script');


    wp_register_style( 'wpeng-accordion-style', get_template_directory_uri().'/wpeng-accordion-style.css', array(), false, 'all' );

    wp_enqueue_style( 'wpeng-accordion-style' );

}

Add the css code below in the wpeng-accordion-style.css file. This code will add styles of the FAQs. You can change the style according to your design if you want.

.accordion-single{
    margin: 0px 0px 10px 0px;
}

.accordion-title span{
    float: right;
}
.acc-close .accordion-content{
   height:0px;
   transition: transform 0.4s ease;
   transform: scaleY(0);
   display:block;
}
.acc-open .accordion-content{
   padding: 20px;
   background-color: #f0f1f1;
   border: 1px solid #ddd;
   width: 100%;
   margin: 0px 0px 10px 0px;
   display:block;
   transform: scaleY(1);
   transform-origin: top;
   transition: transform 0.4s ease;
   box-sizing: border-box;
}

.acc-open .accordion-title, .accordion-title{
   margin:0px;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
   background-color: #ddd;
   border: 1px solid #ddd;
   padding: 5px 20px;

}

Finally, add this js code in the wpeng-accordion-script.js file

var accSingle = document.getElementsByClassName('accordion-single');
var accTitle = document.getElementsByClassName('accordion-title');

for (i = 0; i < accTitle.length; i++) {
   accTitle[i].addEventListener('click', toggleItem, false);
  }
function toggleItem() {
   var itemClass = this.parentNode.className;
   for (i = 0; i < accSingle.length; i++) {
   accSingle[i].className = 'accordion-single acc-close';
   }
   if (itemClass == 'accordion-single acc-close') {
      this.parentNode.className = 'accordion-single acc-open';
    }
   }