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

user_10363297 0
Viewed 72

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 !

wordpress jquery javascript
1 Answers

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>

user_39431250
Related