0

I am trying to get different html tags from a single post and display them as nested accordion. I have quite accomplished. the only problem I have is that. When I try to show all the p tags content inside span but it shows only the first paragraph for each nested menu content.

<div>
<h2 style="text-align: center">History</h2>
 <?php
$sampleH = '<b class="1">2020</b>

<p class="1"><strong class="1">Jan 10</strong> This is first paragraph.</p>
<p class="2"><strong class="2">Feb 2</strong> this is second paragraph</p>
<p class="3"><strong class="3">Mar 23</strong> this is third paragraph</p>

<b class="2">2019</b>

<p class="4"><strong class="4">Jan 20</strong>This is fourth paragraph.</p>
<p class="5"><strong class="5">Feb 30</strong>this is fifth paragraph</p>
<p class="6"><strong class="6">Mar 2</strong>this is sixth paragraph</p>';
$classesH =  100;




 for($w = 1; $w <= $classesH; $w++) {
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 <= count($match); $z++) {
preg_match('/<p class="'.$z.'">(.*?)<\/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>
  • It displays the nested menus properly but shows the same content for each, which is the first paragraph!!! – Ashur Jan 13 at 15:03
  • someone please help, I need it soon. – Ashur Jan 14 at 11:42
0

"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>
  • Thank you Jacob Peattie for your edits – Ashur Jan 15 at 10:55
  • I hope I learn to display my codes in proper format. – Ashur Jan 15 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.