JQuery toggle function on repeater field

• jusseb

• January 10, 2014 at 2:52 am

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!

• Will

• January 10, 2014 at 10:08 am

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.

• jusseb

• January 10, 2014 at 7:31 pm

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