Скрыть строку при переключении других - Wordpress Javascript

Я пытаюсь показать / скрыть строки в WpBakery при нажатии на изображение. При щелчке по первому изображению я хотел бы, чтобы строка переключилась. При щелчке по второму изображению я хотел бы, чтобы первая строка была скрыта, а затем отображалась вторая строка. Я хотел бы сделать это с 10 разными изображениями. Я адаптировал следующий код, который нашел в Интернете:

add_action ('wp_footer', function () {?>

<script>

    ( function( $ ) {

        'use strict';

        $( document ).ready( function() {

            var $trigger = $( '.open-stan' );

            var $hiddenRow = $( '.stan' );

            var $trigger1 = $( '.open-test' );

            var $hiddenRow1 = $( '.test' );


            if ( $hiddenRow.length ) {
                $trigger.click( function() {
                    $hiddenRow.toggle();
                    $hiddenRow1.hide();

                    return false;           
                } );
                    }

            else if ( $hiddenRow1.length ) {
                $trigger1.click( function() {
                    $hiddenRow1.toggle();
                    $hiddenRow.hide();

                    return false;           
                } );
                    }

        } );

    } ( jQuery ) );

</script>

Чтобы проверить, работает ли он, когда я открываю страницу, отображается hiddenRow1, поскольку я не скрывал его с помощью CSS, если вы щелкните первое изображение (триггер), оно скрывает hiddenRow1 и отображает hiddenRow. Однако, когда вы нажимаете на второе изображение, ничего не происходит.

Любая помощь будет оценена