Show/Hide Div in a PHP While Loop

Question

I have file where I'm looping through all events I have in a database and then putting them on the page. I have a button a div at the end of each event div when clicked I would like for that specific div to open. Nothing I've tired works it either opens every div or none at all.

Here's my for the icon to click and expand.

echo "<div id='" . $row['Event ID'] . "' class=\"schedcol schedspan_1_of_12 cellalign expand\"><i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i><br><span>EXPAND<span></div>";

Here's my code for what I want to expand

echo "<div class=\"list\" style=\"display: none;\">";
    echo "<p> " . $row['First Place'] . ", " . $row['Second Place'] . ", ". $row['Third Place'] . "</p>";
echo "</div>";

Here's my javascript

    echo "<script>";
        echo "jQuery(document).ready(function(){
            jQuery('#$eventid').on('click', function(event) {        
                jQuery('.list').toggle('show');
            });
        });";
    echo "</script>";

Hendrik · Accepted Answer · 2020-07-23 19:29:28Z

1

You could add a event-row class and put the id in a data-id="" attribute

echo "<div data-id='" . $row['Event ID'] . "' class=\"event-row schedcol schedspan_1_of_12 cellalign expand\"><i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i><br><span>EXPAND<span></div>";

Then at the html you want to expand you also add a data-id="" attribute

echo "<div data-id='" . $row['Event ID'] . "' class=\"list\" style=\"display: none;\">";
    echo "<p> " . $row['First Place'] . ", " . $row['Second Place'] . ", ". $row['Third Place'] . "</p>";
echo "</div>";

Then outside the loop you put your script

echo '<script>
    jQuery(".event-row").each(function(){
        const $this = jQuery(this);
        const id = $this.attr("data-id");
        $this.find("span:contains(EXPAND)").click(function() {
            jQuery(".list[data-id="+id+"]").toggle("show");
        });
    });
</script>';

edited Jul 23, 2020 at 19:29

answered Jul 23, 2020 at 19:24

Hendrik

1779 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show/Hide Div in a PHP While Loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related