Trying to hide/reveal a DIV based on a PHP loop

Question

I have a PHP loop that returns a series of "talks" in a conference agenda. There is a description associated with each talk.

I have pasted the code here: https://pastebin.com/ckD380iN

<?php
                $args = array('pagename' => 'agenda');
                $agenda_page = new WP_Query($args);

                if($agenda_page->have_posts()) : while($agenda_page->have_posts()) : $agenda_page->the_post();
                    ?>

            <section class="content">


            <h3><?php the_field('agenda_list_title'); ?></h3>
            <?php the_field('agenda_list_intro_paragraph'); ?>

                        <?php the_content(); ?>

                        <?php endwhile; endif; ?>



                 <ul class="event-list">
                    <?php
                            $agenda_posts = new WP_Query(array('post_type' => 'agenda', 'orderby' => 'post_date', 'order' => 'ASC'));
                            while ($agenda_posts->have_posts()) : $agenda_posts->the_post();

                                if( get_field('2021_agenda')) {
                        ?>

                            <li class="event" id="agendastart">
                                <div class="event-time">

                                    <?php
                                    if (have_rows('time_begin')):
                                    while (have_rows('time_begin')) : the_row();

                                    $time = get_sub_field('time');
                                    $time = ltrim($time, '0');
                                    echo $time;
                                    the_sub_field('am/pm');

                                    endwhile;
                                    endif;

                                    echo ' ' . __('&ndash;') . ' ';

                                    if (have_rows('time_end')):
                                    while (have_rows('time_end')) : the_row();

                                    $time = get_sub_field('time');
                                    $time = ltrim($time, '0');
                                    echo $time;
                                    the_sub_field('am/pm');

                                    endwhile;
                                    endif;
                                    ?>
                                </div>

                                <?php edit_post_link('[Edit Event]', '<div class="edit-link">', '</div>'); ?>
                                <div class="indent">

                                    <?php

                                    $c = 0;
                                    if (have_rows('talks')):
                                    while (have_rows('talks')) : the_row();

                                    $title = get_sub_field('title');
                                    $subtitle = get_sub_field('subtitle');
                                    $description = get_sub_field('description');
                                    $i = get_the_id();
                                    ?>

                                    <div class="pretitle"><?=$title;?></div>

                                    <?php if ($subtitle) : ?>

                                        <div class="event-title">
                                            <?php $content = get_sub_field('description'); if ($content) : ?>

                                                  <?php echo $subtitle; ?>
                                                  <br><button onclick="myFunction(myDiv<?php echo $x; ?>)">More Details</button>
                                        </div>

<div id="myDIV<?php echo $x; ?>"><?php $i++ ;?><?php echo $description; ?> <?php else: ?> <?php echo $subtitle; ?> <?php endif; ?> </div>

                                    <?php endif; ?>

                                    <ul class="speaker-list">


                                        <?php
                                        $speakers = get_sub_field('speakers');

                                        if ($speakers) :
                                            foreach ($speakers as $speaker) :

                                            $label = '';
                                            $mod = get_field('moderator', $speaker->ID);
                                            $intr = get_field('intro_speaker', $speaker->ID);

                                            if ($mod == true) :
                                                $label = ' <span style="color:' . get_field('primary_branding_color', 'options') . '">(moderator)</span>';
                                            endif;

                                            if ($intr == true) :
                                                $label = ' <span style="color: #35a6c4">(introduction)</span>';
                                            endif;

                                            ?>

<li>

<a class='iframe' href="<?php echo get_permalink($speaker->ID); ?>"><?php echo get_the_title($speaker->ID); ?></a><?php echo $label; ?>

    <?php the_field('job_title', $speaker->ID); ?>
</li>

                                            <?php
                                            endforeach;
                                        endif; ?>

                                    </ul>

                                    <?php
                                        $c++;
                                    endwhile;
                                    endif;
                                    ?>


                                </div>
                            </li>

                            <?php } endwhile; ?>

                        </ul>

            </section>

Lines 61-86 are the relevant parts, starting with $c = 0;

I have this script as well:

[script>]
function myFunction(index) { 
    var x = document.getElementById("myDIV"+index);
    if (x.style.display === "block"){
        x.style.display = "none"; 
    } 
    else { 
        x.style.display = "block";
    }
}
[/script]

The page is rendered here: https://mitcfo.artisanovens.com/agendapage/

I am hoping to get the descriptions to appear when you click More Details, but the myDIV code is not differentiating between descriptions of each panel. (In source code they are all myDIV which is a problem.)

I've tried unsuccessfully to append a differentiating element to make each DIV unique.

Can anyone see what I am doing wrong?

Many thanks in advance.

Answer 1

Several things to observe. First, with myFunction(myDiv<?php echo $x; ?>) (ex: myFunction(myDiv2336)) you pass the whole HTMLDivElement object to your function. Why not.

Then, in your function myFunction, at the level of var x = document.getElementById("myDIV"+index);, you seek to retrieve an element by its id, when you are already passing the entire object to it. (and then there is a typo error myDiv versus myDIV).

If you want to keep this strategy, you have to modify your function to:

function myFunction(index) {
  if (index.style.display == "block" || index.style.display == "") {
    index.style.display = "none";
  } else {
    index.style.display = "block";
  }
}

You can find a working example here https://jsfiddle.net/j86a0g5z/

You can also pass only the id when calling your function myFunction(<?php echo $x;?>) (ex: myFunction(2336)) and then retrieve the object with var x = document.getElementById("myDiv"+index). Pay attention to the spelling of myDiv ;)