Support

Account

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

Solved

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!

Viewing 3 posts - 1 through 3 (of 3 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.