Support

Account

Home Forums Add-ons Repeater Field WordPress acf trying to hide and show divs in a list, using acf repeater field

Solved

WordPress acf trying to hide and show divs in a list, using acf repeater field

    • JBJ

    • May 30, 2018 at 8:21 pm

    Hi im basically creating a help page, where there is a dynamic list created using the repeater field.

    Each list item there is a line of text, that when clicked on should show some more content (and hide it when clicked on again).

    Now i can get it to work for the first item in the list… but every new item only shows/hides the first item.

    Im assuming i need to do some for each for the id or something i just don’t know how to.

    Thx for any help, here is the code:

    <?php if (have_rows(‘video_felt’)): ?>

      <?php while (have_rows (‘video_felt’)): the_row();
      //vars
      $afsnitOverskrift = get_sub_field(‘afsnit_titel’);
      ?>

    • <?php if($afsnitOverskrift): ?>
      <?php echo $afsnitOverskrift; ?>
      <?php endif;?>

    • <?php if (have_rows(‘video_liste’)): ?>

      <?php while (have_rows (‘video_liste’)): the_row();
      //vars
      $videListe = get_sub_field(‘video_navn’);
      $videoLinker = get_sub_field(‘vide_link’);?>
      <li onclick=”myFunction()”>
      <?php if($videListe): ?>
      <?php echo $videListe; ?>
      <div id=”myDIV” style=”display:none;”>
      <div class=”youtube-player” data-id=”<?php echo $videoLinker;?>”></div>

      </div>
      <?php endif;?>

      <?php endwhile;?>

    <?php endif;?>
    <?php endwhile; ?>

    <?php endif;?>
    <script>
    function myFunction() {
    var x = document.getElementById(“myDIV”);

    • JBJ

    • May 30, 2018 at 8:51 pm

    I figured it out using some jQuery

  • If you are still active: Any insight on what jquery did the trick? Doesn’t help other people looking for a solution by just stating you solved it without providing a proper explanation.

    • JBJ

    • June 24, 2019 at 9:55 pm

    You are right im sorry about that.
    Its been awhile since i worked on this, but im pretty sure this is fix:

    <script>
    jQuery(document).ready(function(){

    jQuery(‘body’).on(‘click’, ‘ul.videoul li’, function() {
    jQuery(“div.myDIV”).hide();
    jQuery(this).find(“div.myDIV”).toggle();

    });
    });
    </script>

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.