How to get different html tags from the content using regex?

Question

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, Commented Jan 13, 2020 at 15:03

Jacob Peattie · Accepted Answer · 2020-01-15 05:47:15Z

"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
Commented Jan 15, 2020 at 10:55 — Ashur, Commented Jan 15, 2020 at 10:55
I hope I learn to display my codes in proper format.
– Ashur
Commented Jan 15, 2020 at 10:56 — Ashur, Commented Jan 15, 2020 at 10:56

Stack Exchange Network

How to get different html tags from the content using regex?

1 Answer 1

Your Answer

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

Hot Network Questions

How to get different html tags from the content using regex?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions

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