I have div displayed by category .In my case, I passed id for category in button show more
if ($custom_term->count > 2) {
echo ("<div class='show-more' data-id='$current_category'>Show more</div>");
}
But , in click show more button , only one div is displayed .I want to display all div
$(".show-more").click(function(){
var ids = $(this).attr("data-id");
$("#"+ids).css({"display": "block"});
});
I have categories .In each category I have custom posts. At initaillay, we displayed 2 posts for every category. In the category we have more than 2 posts add button show more .In click button show more, we display posts by 4. The two initial posts + 4 posts .In every click show more we display by 4 posts.All wordks , just the action show more , at now , we display only one posts , this is the problem
When show more is open in each category, we should close the other shoe more button
<?php
$custom_terms = get_terms('genre');
foreach ($custom_terms as $custom_term) {
wp_reset_query();
$postsPerPage = -1;
$current_category = "";
$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 class="text-actualites">' . $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;
$current_category = $cat;
if ($custom_term->name == "Adventure") {
?>
<div class="col-lg-6 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(); ?>" 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'>");
} else {
echo ("<div class='card recrutements hide-block' id='$cat'>");
//var_dump($cat); data-id='$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(); ?>" 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' data-id='$current_category'>Show more</div>");
}
}
?>
<script>
$(document).ready(function(){
var tax = ["89","93"];
$(".show-more").click(function(){
var ids = $(this).attr("data-id");
$("#"+ids).css({"display": "block"});
for(let i = 0; i < tax.length; i ++){
if(tax[i] != ids){
$("#"+tax[i]).css({"display": "none"});
}
}
});
});
</script>
My Answer:
In your current code, you are only displaying one div when the "show more" button is clicked because you are only targeting and displaying the div with the specific id that is passed in the data-id attribute of the button.
To display all divs associated with the category when the "show more" button is clicked, you can modify your jQuery code to loop through all the divs with the class 'card recrutements' and show them. Additionally, you can hide all other divs that are not associated with the clicked category.
Here is an updated version of your jQuery code:
javascript
$(document).ready(function(){
$(".show-more").click(function(){
var ids = $(this).attr("data-id");
$(".card.recrutements").each(function(){
if($(this).attr("id") == ids){
$(this).css({"display": "block"});
} else {
$(this).css({"display": "none"});
}
});
});
});
With this code, when the "show more" button is clicked, it will display all divs with the class 'card recrutements' that have the same id as the data-id attribute of the button. It will also hide all other divs that do not match the clicked category.
Make sure to adjust the class and id names in the code to match your actual HTML structure.
Rate this post
5 of 5 based on 3125 votesComments