How to display dynamic elements only for current div clicked on the show more button

Question

I have dynamic categroy .In click button "show more" for every category , we should display only elements for this category . in my case when I click in "show more" button for one category , data for all category with button "show more" are displayed .this is the problem .I want display only data for currrent div clicked .

<style>
 .hide-block {
   display: none ;
}

  </style>
  
  <div class="container">

     <?php
        $custom_terms = get_terms('genre');

        foreach ($custom_terms as $custom_term) {
            wp_reset_query();
            $postsPerPage = -1;

            $args = [
                'post_type' => 'film',
                'posts_per_page' => $postsPerPage,
                'orderby' => 'id',
                'order' => 'ASC',


                'tax_query' => [
                    [
                        'taxonomy' => 'genre',
                        'field' => 'slug',
                        'terms' => $custom_term->slug,

                    ],
                ],
            ];

            $loop = new WP_Query($args);
            $parent_included = false;
            if ($loop->have_posts()) {
                echo '<h2>' . $custom_term->name . '</h2>';

                $counter = 0;
                $count_posts = count($loop->have_posts());
                $i = 0;

                while ($loop->have_posts()) :

                    $loop->the_post();
                    $i++;

                    $img = get_field('image', "$post->ID");

                    $cat = $custom_term->term_id;

                    if ($custom_term->name == " Adventure") {
                    ?>

                     <div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
                         <div class="card1 recrutements">
                             <div class="card-header">
                                 <div>
                                     <img src=<?php echo $img["url"]; ?> class='mymap-icon' alt=''>

                                 </div>


                                 <div>
                                     <span class="titre-recrutement">
                                         <div class="bnt-makers ">Communiqué de presse </div>
                                         <div> <?php echo get_the_date(); ?></div>


                                         <div class="bnt-maker "><?php the_field('nom', $post->ID); ?>
                                         </div>

                                 </div>
                             </div>
                             <div class="card-body">
                                 <p><?php the_field('description', $post->ID); ?> </p>

                                 <a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" target="_blank" rel="nofollow">
                                     <span class="name-descripeion">En savoir plus</span>
                                     <div class="btn-icon">
                                         <i class="fas fa-chevron-right"></i>
                                     </div>
                                 </a>
                             </div>
                         </div>
                     </div>


                    <?php
                    } else {
                        $counter++; 
                        if (!$parent_included) {
                           echo '<div id="parentId">';
                           $parent_included = true;
                        }
                        
                ?>
                <div class="col-lg-16 col-md-6 col-sm-12 col-xs-12" class="content">
                         <?php
                            if ($counter <= 2) {
                                echo ("<div class='card recrutements' data-id='$cat'>");
                            } else {
                                echo ("<div class='card recrutements hide-block' data-id='$cat'>");
                                //var_dump($cat);
                            }
                            ?>
                         <div class="card-header">
                             <div>
                                 <img src=<?php echo $img["url"]; ?> class='mymap-icon' alt=''>

                             </div>
                             <div>
                                 <span>
                                     <div><?php echo '<p>' . $custom_term->name . '</p>'; ?>
                                     </div>

                                     <div> <?php echo get_the_date(); ?></div>

                                     <div class="bnt-maker "><?php the_field('nom', $post->ID); ?>
                                     </div>

                             </div>
                         </div>
                         <div class="card-body">
                             <p><?php the_field('description', $post->ID); ?> </p>

                             <a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" target="_blank" rel="nofollow">
                                 <span class="name-descripeion">En savoir plus</span>
                                 <div class="btn-icon">
                                     <i class="fas fa-chevron-right"></i>
                                 </div>
                             </a>
                         </div>
                        </div>
 </div>


 <?php
                    }
                endwhile;
                echo('</div>');
            }

            if ($custom_term->count > 2) {
                echo '  <div class="show-more">Show more</div> ';
               
            }
        }
    ?>

 </div>
 <script>

$(document).ready(function(){

    $(".show-more").click(function(){


     $("div.card").css({"display": "block"});
    

    });

});
   </script>

You find clicked element like in [this](https://stackoverflow.com/a/16091846/14135825) example — Greg--, Sep 22 '21 at 10:37

score 0 · Answer 1 · answered Sep 21 '21 at 14:21

In this case, your onclick functions are not properly targeted. Currently, any time any Show More button is clicked, any div with the card class is displayed. You need to set an id on each card to properly specify which one you want to open, like so.

<style>
div {
    display: none;
}
</style>

<script>

const hideCards = () => {
    $('div.card').css({'display': 'none'});
}

const showCard1 = () => {
    hideCards();
    $('div#card1').css({'display': 'block'});
}

const showCard2 = () => {
    hideCards();
    $('div#card1').css({'display': 'block'});
}
</script>

<div>
    <div class="card" id="card1">
        <p>Card 1 content</p>
    </div>
    <div class="card" id="card2">
        <p>Card 2 content</p>
    </div>

    <button onclick="showCard1">Show Card 1</button>
    <button onclick="showCard2">Show Card 2</button>
</div>

I'm not sure that this is the best way to do it or if this even works, but this is the general gist of what you need. Note that you could do this programatically using data attribute (attr) or by indexing elements in the DOM (eq).

@Roberto go and learn either jQuery or vanilla DOM manipulation, those are the only two ways you can do what you want to do barring a front-end framework — Benjamin Dod, Sep 22 '21 at 15:16

How to display dynamic elements only for current div clicked on the show more button

1 Answers1