ACF Repeater + Hide/Show jQuery #acf #beaverbuilder

acf-repeater-hide-show-jquery.js

jQuery(document).ready(function($) {
    
    // Hide all expanded steps
    $('.expandedstep').hide()
    
    //Show expanded steps while in the builder
    $('html.fl-builder-edit .expandedstep').show();
    
    // When an expand step button is clicked
    $('.expandstepbtn').on('click', function(e) {
        e.preventDefault();
        // Change Text for Expand Button
        var stepbtntxtchange = $('.expandedstep').is(':visible') ? 'Expand' : 'Collapse';
        $(this).text(stepbtntxtchange);
        // Toggle the next adjacent sibling
        $(this).next('.expandedstep').slideToggle(250);
    });

});


/* This is an ACF repeater HTML for Beaver Builder/Themer */
[wpbb-acf-repeater name='REPEATER_FIELD_NAME']
    <div class="projectstep">
        /* Always Displays */
        [wpbb post:acf type='text' name='project_step']

        /* Expands after button is clicked */
        <button class="expandbtn">Expand</button>
        <div class="expandedstep">
            [wpbb post:acf type='text' name='expanded_project_step']
        </div>
    </div>
[/wpbb-acf-repeater]