Вызвать клик

Question

У меня есть следующий код:

<div class="under-container">

    <div class="page-header">
      <h1>GROUPS</h1>
    </div>

    <?php if (!have_posts()) : ?>
      <div class="alert alert-warning">
        <?php _e('Sorry, no results were found.', 'sage'); ?>
      </div>
    <?php endif; ?>

    <div class="row">
        <div class="col-sm-9">

            <ul class="list-regioni-mobile list-unstyled text-center visible-xs">
                <li><a href="#" data-rel="all" class="active">All Groups</a></li>
                <li><a href="#" data-rel="Group1">Group 1</a></li>
                <li><a href="#" data-rel="Group2">Group 2</a></li>
                <li><a href="#" data-rel="Group3">Group 3</a></li>
            </ul>


Show here HTML code only after Group 2 click.

            <div id="target" class="grid-items yes">
                <ul class="list-unstyled">
                <?php
                $second_query = new WP_Query( 'post_type=groups&posts_per_page=9999&orderby=title&order=ASC' );
                while ($second_query->have_posts()) : $second_query->the_post();
                $group = get_field('group'); ?>
                        <li data-group="<?php echo $group; ?>">
                            <?php get_template_part('templates/content', 'grid'); ?>
                        </li>
                <?php endwhile; ?>
                </ul>
            </div>

        </div>

    </div>

</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content text-center">
      <div class="modal-header">
        <div class="item-image"></div>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="item-title"></div>
        <span class="item-address"></span> - <span class="item-site"></span>
        <div class="item-content"></div>
        <div class="item-button"></div>
      </div>
    </div>

  </div>
</div>

Мне бы хотелось, чтобы при нажатии на группу 2 на странице отображалась часть HTML, как это сделать?

Я не могу найти решение, потому что когда я нажимаю на Группу 1, Группу 2, Группу 3, я всегда остаюсь на одной странице.

Я думаю, что с jQuery вы можете перехватить щелчок и сделать, например, <div> видимым с кодом HTML, который мне интересно показать, и скрыть его, когда я нажимаю на другие группы.

Answer 1

Вы можете присвоить ссылке идентификатор, присвоить div стиль отображения none, прослушать событие щелчка и изменить отображение на встроенный блок при нажатии.

    <li><a href="#" id="clickme" data-rel="Group2">Group 2</a></li>

    <div id="target" class="grid-items yes" style="display:none">

    $(clickme).on('click', function(){
    $('#target').css('display', 'inline-block')
    }

Answer 2

Вот как вы можете показать свои html

$("a").on('click',function(){
   $("a").removeClass('active');
   $(this).addClass('active');
   $('div').addClass('hide');
   let group=$(this).data('rel');
   $(`.${group}`).removeClass('hide');
})

.hide{
 display:none;
}

.active{
 color:yellowgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-regioni-mobile list-unstyled text-center visible-xs">
                <li><a href="#" data-rel="all" class="active">All Groups</a></li>
                <li><a href="#" data-rel="Group1">Group 1</a></li>
                <li><a href="#" data-rel="Group2">Group 2</a></li>
                <li><a href="#" data-rel="Group3">Group 3</a></li>
            </ul>
            
            <div class="Group1 hide div">
              Group1
            </div>
             <div class="Group2 hide div">
              Group2
            </div>
             <div class="Group3 hide div">
              Group3
            </div>