“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>