"Hi dear all, I finally found a solution for my question. I like to share it with you to be helpful. I will be glad if someone can make a better and precise solution for it.
Below is the working code:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #7ED957; color: #000; cursor: pointer; padding: 8px; width: 100%; border: 1px solid grey; text-align: center; outline: none; border-radius: 5px; font-size: 13px; transition: 0.4s; } .accordion1 { background-color: #9df972; cursor: pointer; width: 95%; padding: 3px 0; margin: 0 auto; border: 1px solid grey; text-align: center; outline: none; border-radius: 5px; font-size: 13px; transition: 0.4s; } .active, .accordion:hover { background-color: #418425; color: #fff; } .active1, .accordion1:hover { background-color: #418425; color: #fff; } .panel { padding: 7px 5px; display: none; padding: 3px; background-color: #f7f5f5; overflow: hidden; text-align: center; font-size: 80%; } .panel1 { display: none; width: 95%; margin:0 auto; padding: 6px 1px; background-color: #f7f5f5; overflow: hidden; text-align: center; font-size: 100%; } </style> </head> <body> <!----------------- Update ----------------------------> <div> <h2 style="text-align: center">Updates</h2> <?php $tkey = 'somaliland-update'; $update = new WP_Query(array( 'posts_per_page' => -1, 'tag' => $tkey )); wp_reset_postdata(); if($update->have_posts()) { while ($update->have_posts()) { $update->the_post(); $sample = get_the_content(); $classes = 100; for($i = 1; $i <= $classes; $i++) { preg_match('/<strong class="'.$i.'">(.*?)<\/strong>/s', $sample, $match); if($match) { ?> <button class="accordion"> <?php echo $match[1]; ?> </button> <div class="panel"> <p> <?php preg_match('/<p class="'.$i.'">(.*?)<\/p>/s', $sample, $match); echo $match[1]; ?> </p> </div> <?php }}}} ?> </div> <br><br> <!----------------- History ----------------------------> <div> <h2 style="text-align: center; font-weight: bold;">History</h2> <?php $tkey = 'somaliland-history'; $update = new WP_Query(array( 'posts_per_page' => -1, 'tag' => $tkey )); wp_reset_postdata(); if($update->have_posts()) { while ($update->have_posts()) { $update->the_post(); $sampleH = get_the_content(); $classesH = 100; for($w =1; $w <= $classesH; $w++) { if($w == 1) { preg_match('/<b class="'.$w.'">(.*?)<\/b>/s', $sampleH, $match); if($match) { ?> <button class="accordion"> <?php echo $match[1]; ?> </button> <div class="panel"> <?php for($y = 1;$y <= $classesH; $y++) { preg_match('/<strong class="'.$y.'">(.*?)<\/strong>/s', $sampleH, $match1); if($match1) { ?> <p class="accordion1"> <?php echo $match1[1]; ?> </p> <?php for($z = 1; $z <= $classesH; $z++) { preg_match('/<p class="'.$y.'">(.*?)<\/p>/s', $sampleH, $match2); if($match2) { ?> <span class="panel1"> <?php echo $match2[1]; ?> </span> <?php }}}} ?> </div> <?php } } elseif($w == 2){ preg_match('/<b class="'.$w.'">(.*?)<\/b>/s', $sampleH, $match); if($match) { ?> <button class="accordion"> <?php echo $match[1]; ?> </button> <div class="panel"> <?php for($y = 1;$y <= $classesH; $y++) { preg_match('/<strong class="0'.$y.'">(.*?)<\/strong>/s', $sampleH, $match1); if($match1) { ?> <p class="accordion1"> <?php echo $match1[1]; ?> </p> <?php for($z = 1; $z <= $classesH; $z++) { preg_match('/<p class="0'.$y.'">(.*?)<\/p>/s', $sampleH, $match2); if($match2) { ?> <span class="panel1"> <?php echo $match2[1]; ?> </span> <?php }}}} ?> </div> <?php } } elseif($w == 3) { preg_match('/<b class="'.$w.'">(.*?)<\/b>/s', $sampleH, $match); if($match) { ?> <button class="accordion"> <?php echo $match[1]; ?> </button> <div class="panel"> <?php for($y = 1;$y <= $classesH; $y++) { preg_match('/<strong class="00'.$y.'">(.*?)<\/strong>/s', $sampleH, $match1); if($match1) { ?> <p class="accordion1"> <?php echo $match1[1]; ?> </p> <?php for($z = 1; $z <= $classesH; $z++) { preg_match('/<p class="00'.$y.'">(.*?)<\/p>/s', $sampleH, $match2); if($match2) { ?> <span class="panel1"> <?php echo $match2[1]; ?> </span> <?php }}}} ?> </div> <?php } } elseif($w == 4) { preg_match('/<b class="'.$w.'">(.*?)<\/b>/s', $sampleH, $match); if($match) { ?> <button class="accordion"> <?php echo $match[1]; ?> </button> <div class="panel"> <?php for($y = 1;$y <= $classesH; $y++) { preg_match('/<strong class="000'.$y.'">(.*?)<\/strong>/s', $sampleH, $match1); if($match1) { ?> <p class="accordion1"> <?php echo $match1[1]; ?> </p> <?php for($z = 1; $z <= $classesH; $z++) { preg_match('/<p class="000'.$y.'">(.*?)<\/p>/s', $sampleH, $match2); if($match2) { ?> <span class="panel1"> <?php echo $match2[1]; ?> </span> <?php }}}} ?> </div> <?php } } elseif($w == 5) { preg_match('/<b class="'.$w.'">(.*?)<\/b>/s', $sampleH, $match); if($match) { ?> <button class="accordion"> <?php echo $match[1]; ?> </button> <div class="panel"> <?php for($y = 1;$y <= $classesH; $y++) { preg_match('/<strong class="0000'.$y.'">(.*?)<\/strong>/s', $sampleH, $match1); if($match1) { ?> <p class="accordion1"> <?php echo $match1[1]; ?> </p> <?php for($z = 1; $z <= $classesH; $z++) { preg_match('/<p class="0000'.$y.'">(.*?)<\/p>/s', $sampleH, $match2); if($match2) { ?> <span class="panel1"> <?php echo $match2[1]; ?> </span> <?php }}}} ?> </div> <?php } } elseif($w == 6) { preg_match('/<b class="'.$w.'">(.*?)<\/b>/s', $sampleH, $match); if($match) { ?> <button class="accordion"> <?php echo $match[1]; ?> </button> <div class="panel"> <?php for($y = 1;$y <= $classesH; $y++) { preg_match('/<strong class="00000'.$y.'">(.*?)<\/strong>/s', $sampleH, $match1); if($match1) { ?> <p class="accordion1"> <?php echo $match1[1]; ?> </p> <?php for($z = 1; $z <= $classesH; $z++) { preg_match('/<p class="00000'.$y.'">(.*?)<\/p>/s', $sampleH, $match2); if($match2) { ?> <span class="panel1"> <?php echo $match2[1]; ?> </span> <?php }}}} ?> </div> <?php } } }}} ?> </div> <!----------------------- Scripts --------------------------> <script> var acc = document.getElementsByClassName("accordion"); var i; var abc = document.getElementsByClassName("accordion1"); var a; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } for (a = 0; a < abc.length; a++) { abc[a].addEventListener("click", function() { this.classList.toggle("active1"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> </html>
