How to make the block with full information open below the row?

Question

PHP

Hello!
Please explain how this block behavior is implemented. For example, as in the "Mediamarkt", we click on the "Show all" button in the catalog and below this row of blocks a block with full information appears. And each time below a certain number. Thanks a lot.
https://mediamarkt.ru/catalog (Not advertising).

Answer 1

Just a demonstration of the possibilities of the PCRE library.
https://regex101.com/r/PUQP9o/3
https://rextester.com/XZMZK18309

$str = 'колесо';
$letters = preg_split('//u', $str, -1, PREG_SPLIT_NO_EMPTY);

foreach ($letters as $i => &$letter) {
    $letter .= '(?!\\g' . ($i + 1) . ')()';
}

$regex = '#^(?:'.implode('|', $letters).')++$#u';

echo $regex, PHP_EOL;

$words = array ('колесо','колосс','оселок');

var_dump(preg_grep($regex, $words));

Answer 2

^(?:([еклс])(?!.*\1))*(?:о(?:([еклс])(?!.*\2))*){0,2}$

Reference: perlre .
I want to point out that the regular expression is not the best or just a readable solution to this problem.

Answer 3

Try like this:

$poisk = preg_grep("/[колесо][колесо][колесо][колесо][колесо][колесо]/", $slova);

Answer 4

Alternatively, you can divide the product catalog into 3 divs (depending on the number of categories)
And between the first and second divs, display a block with complete information, which will be filled depending on the selected product category / depending on the button pressed. And so it is similar for each level... you manipulate all this on js.

<div>
    <div></div>
    <div></div>
    <div></div>
     ...
</div>
<div style="display: none"></div>
<div>
    <div></div>
    <div></div>
    <div></div>
     ...
</div>
<div style="display: none"></div>
<div>
    <div></div>
    <div></div>
    <div></div>
     ...
</div>