HTML & CSS How to rerun php code depending on button clicked

[mdavid]

Hi, I'm building a gallery site for paintings - the paintings are divided into groups eg. Oil on canvas, Water Color etc.
This is the PHP loop I have for displaying Oil on canvas:

if ($entry['medium'] == "Oil on canvas") {
             $count++;
            
             $nxtNum = $count + 1;
             echo "<a id='pic{$count}'><span style='visibility: hidden;'>hi</span></a> ";
             echo "<div class='grid-container'> ";
             // start prv-nxt
             echo "<div class='grid-item prv-nxt'>";
             if ( $count > 1) {
                 $prvNum = $count - 1;
                  echo "<a href='#pic{$prvNum}'><i class='fa-style fa-solid fa-caret-up' style='font-size: 2.5rem;'></i></a><br/>";
                } 
             echo "<a href='#pic{$nxtNum}'><i class='fa-style fa-solid fa-caret-down' style='font-size: 2.5rem;'></i></a></div>";
             // end prv-nxt
             // start imgMain
            echo "<div class='grid-item imgMain'>";
            echo "<img class='example lazyload' src='{$imagesDirectory}{$image}' data-src='{$imagesDirectory}{$image}' data-sizes='auto' data-magnify-src='{$imagesDirectory}{$image}'></div> ";
             // end imgMain
            // start lableTxt
            echo "<div class='flex-container'>";
            echo "<div class='flex-items' style='{$captPos}'>{$title}</div>";
            echo "<div class='flex-items' style='{$captPos}'>{$medium}</div>";
            echo "<div class='flex-items' style='{$captPos}'>{$year} {$size}</div>";
            echo "</div></div>";
      }
}

What is the best way to enable the user to rerun the above code (using button onClick event - or similar) to view other painting groups eg.
if ($entry['medium'] == "Water color") {
Using the same page?
Any code snippets, pointers much appreciated

 

[OldMan]

I don't think you need to define thing with if ($entry['medium'] == "Oil on canvas")
It may be in the items you don't define in your clip like:
$imagesDirectory,
$image,
and may be $captPos

 

[mdavid]

Hi OldMan,
Thanks for this. Didn't quite understand how this would change what's displayed.
I had a brainwave - well I thought it was quite clever - if I load everything (I'm using lazy-loading)
and then just toggle between display: none/block depending on which group to display?
Is that a reasonable solution? - not sure how to implement it though.