Develop Reference

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

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>

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).

In JavaScript, how to hide / show a div by clicking on the icon that corresponds to it

I'm looking for a method in native JavaScript or jQuery to display a div by clicking on the icon that corresponds to it.
The icons are in a carousel that works with Owl Carousel 2
Icons and div are created dynamically on WordPress with an ACF Repeater Fields
Icons and div each have an ID :
For icons: img_1, img_2 ...
For blocs: div_1, div_2 ...
The icons carousel loop :
<?php $GLOBALS['img'] = 0;
if (have_rows('carrousel_icons')): ?>
<div id="owl-carousel-skills" class="owl-carousel-skills owl-theme col-12 col-sm-10">
<?php while (have_rows('carrousel_icons')): the_row();
$icon = get_sub_field('icon');
$GLOBALS['img']++;
?>
<div id="img_<?= $GLOBALS['img'] ?>" class="owl-carousel-skills-menu-item">
<img src="<?= $icon['url'] ?>" alt="<?= $icon['alt'] ?>">
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
ACF Repeater Fields Blocs :
<?php
$GLOBALS['div'] = 0;
$counter = 0;
if (have_rows('carrousel_icons')): ?>
<div class="col-12 col-sm-8 bloc_carousel_icons__txt">
<?php while (have_rows('carrousel_icons')): the_row();
$title = get_sub_field('title');
$txt = get_sub_field('txt');
$GLOBALS['div']++;
if ($counter) {
?>
<div id="div_<?= $GLOBALS['div'] ?>" class="inactive" style="display: none;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php continue; } ?>
<!-- first DIV -->
<div id="div_<?= $GLOBALS['div'] ?>" class="active" style="display: block;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php $counter++;
endwhile; ?>
</div>
<?php endif; ?>
Link to see a screenshot
I tested something but it only shows / hides all the div at once by clicking on any icon :
$(function(){
var $allBlocks = $(".bloc_carousel_icones__textes > div");
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$(document.body).on("click", "div.owl-carousel-competences-menu-item", function (evt) {
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$allBlocks.not($('.hidden').fadeToggle()).hide();
});
});
I have no idea how to do this, anyone have an idea?
Thanks in advance !

You can do it like this: Add a click() event handler for all images that have an id that starts with img_, get the number of this id with substr and toggle the corresponding div.
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
$("#div_" + id).fadeToggle();
});
})
Update: As asked in the comment, there's a solution needed to deactivate the previously active <div> when a new <div> gets activated. This can be done as follows:
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
if ($("div[id^='div_']").not($("#div_" + id)).is(":visible")) {
$("div[id^='div_']").not($("#div_" + id)).fadeToggle();
}
$("#div_" + id).fadeToggle();
});
})
div[id^='div_'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img_1" src="https://dummyimage.com/50x50/000000/ffffff&text=1" />
<img id="img_2" src="https://dummyimage.com/50x50/cecece/000000&text=2" />
<div id="div_1">
div 1
</div>
<div id="div_2">
div 2
</div>

Posts sorted by year in accordion

I have a custom post type for testimonials and it has few posts. I'm trying to create an accordion which shows posts by year. So when you click on the year it displays all the posts for that year (see screenshot below).
I have got it somewhat working, problem is when I click on the year, it only shows one post for that year. Here's the code -> https://pastebin.com/3F98dcEU
<?php get_header();?>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom:20px;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
<div class="container-fluid testimonial-header">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Testimonials</h1>
</div>
</div>
</div>
<div class="container testimonial-content">
<div class="block-1">
<h2 class="heading">Delivering Exceptional Customer Service</h2>
<p class="sub-heading">Being locally owned and operated, our objective is to provide exceptional client service delivered by our professional team. We take great pride in building homes that are beyond expectation, on time and on budget.</p>
</div>
</div>
<div class="container-fluid py-5 archive-testimonial">
<div class="container">
<div class="row">
<div class="col-lg-12">
<?php
global $wpdb;
$posts = $wpdb->posts;
//Get all unique years as "years" from posts where post type is equal to testimonials
$sql = "SELECT DISTINCT(YEAR(`post_date`)) as years FROM $posts WHERE post_type = 'testimonials' ORDER BY years DESC"; //Get all post year list by DESC
//Loop through all results and use date_query param https://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters
$result = $wpdb->get_results($sql);
foreach($result as $rs) { ?>
<button class="accordion"><?php echo $rs->years ;?></button>
<?php $args = array(
'post_type' => 'testimonials',
'post_per_page'=> -1,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'date_query' => array(array(
'year'=> $rs->years,
),),
);
$loop = new WP_Query($args);
if($loop->have_posts()) {
while($loop->have_posts()) : $loop->the_post(); ?>
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php }
?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
</div>
<?php endwhile;
}
}
?>
</div>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<?php get_footer();?>
You could try the code with built-in post type and you'd see what I'm talking about.
My approach to this might be completely wrong.
Any help is highly appreciated.

Your panel div is inside your while loop, and so it is repeated for each post. You should have it outside of your loop, so it is only generated once for every year.
Change this:
while($loop->have_posts()) : $loop->the_post(); ?>
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php }
?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
</div>
<?php endwhile;
to this:
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php } ?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
<?php endwhile; ?>
</div>

Cannot copy text from div when timer is refreshing it

I have a chat with setInterval and it's refreshing a div (where messages are), but the problem is when i select the message with my mouse (blue marker) and for example i want to copy something from it, the timer refreshes the chat div and it won't let me do that. It automaticly disables the marked text, i hope you understand me what i'm talking about.
setInterval('test()', 1000);
function test(){
$('#chatbox').load('load.php?chat_refresh');
$("#online-users-text").load(location.href+ ' #online-users-text');
<?php
$query_chat = $handler->query('SELECT * FROM users');
while($ch = $query_chat->fetch()){
if($ch['status'] == 1){
?> Chat_Refresh(); <?php
}
}
?>
}
As you can see in the code, timer is calling function test() after every second, and that function is calling $('#chatbox').load('load.php?chat_refresh'); which is refreshing load.php?chatrefresh from another page:
if(isset($_GET['chat_refresh'])){
$query = $handler->query('SELECT * FROM (SELECT * FROM chat ORDER BY id DESC LIMIT 15) AS chat ORDER BY id ASC');
while($r = $query->fetch()){
$strText = preg_replace( '/(http|ftp)+(s)?:(\/\/)((\w|\.)+)(\/)?(\S+)?/i', '<span style="text-decoration: underline;">\0</span>', showBBcodes($r['message']) );
?>
<?php if(empty($r['owner'])){ ?> <!-- Clear chat -->
<div class="chat-body clearfix">
<div class="header">
<span style="line-height: 40px; visibility: hidden;">test</span>
</div>
</div>
<?php }else{ ?>
<ul class="chat"> <!-- Show chat -->
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="<?php echo BASE_URL, $r['avatar']; ?>" class="img-thumbnail" width='40' height='40' />
</span>
<div class="chat-body clearfix">
<div class="header">
<span style="line-height: 40px; color: #737373;">
<b><?php echo $r['owner']; ?></b>:</span> <span class="text"><?php echo parseSmiley($strText); ?></span> <small style="line-height: 40px; margin-right: 5px;" class="pull-right text-muted"><i class="fa fa-clock-o"></i> <?php echo $r['created']; ?></small>
</div>
</div>
</li>
</ul>
<?php }
}
}
When i go to google chrome console, i can clearly see that timer is refreshing #chatbox div and that div is blinking.

bxslider - how to get thumbnails to link to main images

I am using bxslider to call images for individual records
The slider is working fine and I have it set to auto page through the images related to the specific record, but I am having a problem linking the thumbnails to the slider.
At the present time if I click on a thumbnail below the slider it is loading the image in a lightbox (if that is the correct terminology) instead of moving the slider along to the relevant image.
Below is my code that I am using and any suggestions would be appreciated
thank you - Mel
<div> <script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: 'false',
auto: 'true',
autoControls: 'true',
});
});
</script>
<ul class="bxslider list-unstyled"><?php foreach($images as $key=>$image) { ?>
<li class="img-responsive list-unstyled"><img src="<?php echo $image ['image']; ?>" /></li><?php } ?>
</ul></div>
<div id="bx-pager">
<div class="row">
<?php foreach($images as $key=>$image) { ?>
<div class="col-md-3 col-sm-4 col-xs-6 bx-pager">
<a class="image_group thumbnail" rel="image_group" href="<?php echo $image['image']; ?>" title="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
<img src="<?php echo $image['thumb']; ?>" alt="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
</a>
</div>
<?php } ?>
</div>
</div>