Creating Bootstrap Accordion Shortcode- Setting IDs

Question

I am trying to make a Bootstrap accordion dropdown shortcodes. It all works except the IDs will not work. When I inspect code, the aria-controls, aria-labelledby, href values are all empty despite having been set. How do I set a unique ID for the two necessary accordion IDs in order for this drop down to work? The reason I need these to be unique is because there will be multiple dropdowns so they all need to be called individually.

Here is the shortcode in my shortcode.php file:

 function FAQ($atts) {
    extract( shortcode_atts(array('title'=>'', 'content'=>'', 'titleID'=>'', 'bodyID'=>''), $atts) );
    $FAQ = '<div class="panel panel-default">
        <div class="panel-heading" role="tab" id="'.$titleID.'">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#'.$bodyID.'" aria-expanded="false" aria-controls="'.$bodyID.'">
              <i class="fa fa-arrow-circle-o-down"></i> '.$title.'
            </a>
          </h4>
        </div>
        <div id="'.$bodyID.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="'.$titleID.'">
          <div class="panel-body">' . $content . '

          </div></div></div>';

return $FAQ;

}

 add_shortcode('FAQ', 'FAQ');

Here is what I wrap the above code with.

   function FAQpanel( $atts, $content = null ) {
    return '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">' .  do_shortcode($content) . '</div>';

 }

  add_shortcode( 'FAQpanel', 'FAQpanel' );

Here is the shortcode in action

  [FAQpanel][FAQ title="Question One" titleID="2" headerID="5"]
  Vivamus sagittis lacus vel augue lapreet rutrum....
   [/FAQ][/FAQpanel]

It does work but I cannot open the panel.

Answer 1

Bootstrap 4 two accordions (collapse) in single page (same page) without conflict https://getbootstrap.com/docs/4.0/components/collapse/

// Add Shortcode function faq_shortcode( $atts , $content = null ) {

    // Attributes
    extract ( shortcode_atts(

        array(

            'class'   => '',
            'question'=> '',
            'id'      => '' ,
            'collapse'=>'',
            'cid'=>'',
            'hid'=>'',
            'aria'=>'',
            'accid'=>''

        ),

        $atts )

    );




        if ( $atts['collapse'] == 'show' ) { 

            $collapse =  'collapse show';

            $aria = 'true';

        } else {

            $collapse =  ' collapse';
            $aria = 'false';

        }

       if ( $atts['class'] ) {

            $class = $atts['class'];

        } else {

         $class = 'some';

        }

        $out .='<div class="card">';
        $out .= '<div class="card-header" id="'.$hid.'">';
        $out .='<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#'.$cid.'" aria-expanded="'.$aria.'" aria-controls="'.$cid.'">'.$atts['question'].'</button>'; 
        $out .='</div>';
        $out .= '<div id="'.$cid.'" class="'.$collapse.'" aria-labelledby="'.$hid.'" data-parent="#'.$atts['accid'].'">';
        $out .=  '<div class="card-body">';
        $out .= do_shortcode($content) ;
        $out .=  '</div>';
        $out .=  '</div>';
        $out .=  '</div>';





        return $out;

}

add_shortcode( 'faq', 'faq_shortcode' );

column 6

<div id="accordion">

[faq question="Lorem Ipsum is simply dummy text" hid="headOne" cid="colOne" accid="accordion" collapse="show"]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of

[/faq]

[faq question="Lorem Ipsum is simply dummy text" hid="headTwo" cid="colTwo" accid="accordion" ]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of

[/faq]

[faq question="Lorem Ipsum is simply dummy text" hid="headThree" cid="colThree" accid="accordion" ]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of

[/faq]

</div>

another column 6

<div id="accordion1">

[faq question="Lorem Ipsum is simply dummy text" hid="head1One" cid="col1One" accid="accordion1" collapse="show"]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of

[/faq]

[faq question="Lorem Ipsum is simply dummy text" hid="head1Two" cid="col1Two" accid="accordion1" ]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of

[/faq]

[faq question="Lorem Ipsum is simply dummy text" hid="head1Three" cid="col1Three" accid="accordion1" ]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of

[/faq]

</div>

Answer 2

/* FAQ
-------------------------------------------------- */

    // Add Shortcode
    function faq_shortcode( $atts , $content = null ) {

        // Attributes
        extract ( shortcode_atts(

            array(

                'class'   => '',
                'type'    => '',
                'question'=> '',
                'id'      => '' 

            ),

            $atts )

        );

            $out .='<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
            $out .='<div class="panel panel-default">';
            $out .='<div class="panel-heading" role="tab" id="headingOne">';
            $out .='<h4 class="panel-title">';
            $out .='<a role="button" data-toggle="collapse" data-parent="#accordion" href="#'. $id .'" aria-expanded="true" aria-controls="collapseOne">';
            $out .='<i class="more-less glyphicon glyphicon-plus"></i>';
            $out .= $question;
            $out .='</a>';
            $out .='</h4>';
            $out .='</div>';
            $out .='<div id="'. $id .'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">';
            $out .='<div class="panel-body">'; 
            $out .= do_shortcode($content) ;
            $out .='</div>';
            $out .='</div>';
            $out .='</div>';


         return $out;

    }

    add_shortcode( 'faq', 'faq_shortcode' );

example:

[faq question="Honest and dependable" id="collapseOne"]

this is content part (do short code)

[/faq]

[faq question="Quality commitment" id="collapseTwo"]

this is content part (do short code)

[/faq]

[faq question="Quality commitment" id="collapseThree"]

this is content part (do short code)

[/faq]