Support

Account

Home Forums Front-end Issues JQuery toggle function on repeater field

Solved

JQuery toggle function on repeater field

  • Dear ACF,

    I have added repeater fields to a custom post type. Everything is working fine, repeater fields are showing correctly and the data is handled the right way.

    The repeater fields are shown in a list, what I would like is when I click on a list item that it toggles (with jQuery) the other <li> element showing another field.

    I’ve found this ; http://www.advancedcustomfields.com/resources/tutorials/adding-custom-javascript-jquery-for-fields/

    But I can’t really get it to work.

    This is my code for showing the repeater fields ;

    <?php
         
                            // get all rows from the postmeta table where the sub_field (type) equals 'type_3'
                            // - http://codex.wordpress.org/Class_Reference/wpdb#SELECT_Generic_Results
                                $rows = $wpdb->get_results($wpdb->prepare( 
                                    "
                                    SELECT * 
                                    FROM wp_postmeta
                                    WHERE meta_key LIKE %s
                                        AND meta_value = %s
                                    ",
                                    'leden_details_%_plaats_lid', // meta_name: $ParentName_$RowNumber_$ChildName
                                    'selected_value' // meta_value: 'type_3' for example
                                ));
                         
                            // loop through the results
                            if( $rows )
                            {
                                foreach( $rows as $row )
                                {
                                   
                         
                            ?>
    
                                <li class="leden-details"><?php echo get_the_title( $row->post_id ); ?></li>
    <li class="leden-show">show this field</li>
    
                        <?php
                     
                            }
                        }
                     
                        ?>

    I can get jQuery to toggle the .leden-show but then it toggles everything on that page. It only needs to toggle the clicked element.

    Hope you can help me out,

    Thanks!

  • Not quite sure what you’re toggling with but something like this should do it with the DOM structure you have there.

    jQuery('.leden-details').on('click', function(){
        $(this).next('.leden-show').toggle();
    });

    The next() is the trick.

  • Thanks, tweaked it a bit and it worked. Thanks for your help!

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

The topic ‘JQuery toggle function on repeater field’ is closed to new replies.