Dynamic content accordion in a Wordpress Template page

Question

I am trying to build a dynamic accordion in the template file of a Webseite (function.php)but unfortunately it doesn't work. its works only as a normal collapsible. plz help.

my code looks like this:

<div class="panel-group" id="accordion">
   <div class="card">
     <div class="card-header sub-title" role="tab" id="heading'.$post->ID.'"  data-toggle="collapse" data-parent="#accordion" data-target="#collapse'.$post->ID.'">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$post->ID.'">
          <h4><span>'. $post->post_title .'</span></h4>
                 <p class="bold-title" style="font-size: 16px;padding-bottom:0px;font-style: normal;"><strong>'.$rnr_resume_title.'</strong></p>
                 <p style="margin-bottom:0px">'.$rnr_resume_time.'</p>
                
          </a>
          </div>
          
          
       
    <div id="collapse'.$post->ID.'" class="collapse"  data-parent="#accordion" style="height:0px;overflow: hidden; transition: all 0.5s ease 0s;"  role="tabpanel" aria-labelledby="heading'.$post->ID.'" >
   
           <div class="tab-contents">   
            <a id="single_image" href="'.$img.'" class="fancybox" style="text-align: center;"/>
            <div class="img-wrap">   
            <div class="overlay"><i class="fa fa-search"></i></div>.    
            <div style= "max-width: 100%; max-height: 100%;"> <img src="'.$img.'" style= " max-width: 100%; max-height: 100%; margin: 0px auto 0px auto; display: block;" /> </div>
            </div>
            <div class="seperatorLine"></div></a>
        
               <ul style="text-align: center;">';
                $count = 1;
            
            if (is_array($rnr_resume_subtitle) || is_object($rnr_resume_subtitle))
         {  foreach($rnr_resume_subtitle as $sub){
                
                    $html.= "<h2 class='internetadres' style='text-align: center;font-size:2em; margin-top:5px;'> <strong> <a href= 'https://{$sub}' target='_blank' rel='noopener noreferrer'> <i class='logointernetexp fa fa-internet-explorer'> </i> {$sub} </a> </strong> </h2></ul>";
                
        }   }
            
         $html.=' <div class="seperatorLine"></div> '. $content;
    
                $html.='
         </div>
         </div>
         </div>
         </div>
            

question from:https://stackoverflow.com/questions/66051913/dynamic-content-accordion-in-a-wordpress-template-page

Answer 1

Waitting for answers