Cacher is the code snippet organizer for pro developers

$com_padd: 3rem;

.wr-acc {
  border-radius: 0.5rem;
  border: 1px solid #e7e7e7;
}

.wrapQt {
  background: #fff;
  // margin-bottom: 2rem;
  position: relative;
  &:not(:last-child) {
    border-bottom: 1px solid #e7e7e7;
  }
}

.cont-acc {
  position: relative;
  cursor: pointer;

  padding: 3rem 6rem 3rem $com_padd;
  background: url(../images/select.svg) no-repeat right 2.5rem center;
  background-size: 1.6rem;
}

.cont-acc[aria-expanded="true"] {
  background-image: url(../images/select-top.svg);
  // background-color: #000;
  color: $secondarycolor !important;
}

.subInCollapse {
  // background: #000;
  // color: #fff;
  padding: 3rem $com_padd;
}

<?php
    function d_accordeon($arr = null) {
        if (!$arr) return '[d_accordeon] pass array';
        static $static_id = 0;

        $rows = '';
        $i=0;
        if ( have_rows($arr['field'], $arr['id']) ) : while( have_rows($arr['field'], $arr['id']) ) : the_row();
        $aria_expanded = $i == 0 ? 'aria-expanded="true"' : null;
        $in_show = $i == 0 ? 'in show' : null;
        $rows .= '
            <div class="wrapQt">
                <div data-toggle="collapse" data-target="#d_accordeon_'.$static_id.'_'.$i.'" class="cont-acc color-themecolor" '.$aria_expanded.'>'.get_sub_field($arr['sf_title']).'</div>
                
                <div id="d_accordeon_'.$static_id.'_'.$i.'" class="collapse '.$in_show.'" '.$aria_expanded.'>
                    <div class="subInCollapse desc color-themecolor">
                        '.get_sub_field($arr['sf_text']).'
                    </div>
                </div> 
            </div>
        ';
        $i++;
        endwhile; endif;   
        
        $static_id++;

        return '
            <div class="wr-acc">
                '.$rows.'
            </div>       
        ';     
    }

/* Usage
$arr = array(
    'id' => d_get_global('option'),
    'field' => 'accordeon',
    'sf_title' => 'title',
    'sf_text' => 'text  ',
);
echo d_accordeon($arr);
*/

/* ACF JSON
[{"key":"group_5ec03844837d7","title":"accordeon","fields":[{"key":"field_5ec0384ffabe4","label":"accordeon","name":"accordeon","type":"repeater","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"collapsed":"","min":0,"max":0,"layout":"table","button_label":"","sub_fields":[{"key":"field_5ec0387efabe5","label":"title","name":"title","type":"text","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"default_value":"","placeholder":"","prepend":"","append":"","maxlength":""},{"key":"field_5ec03884fabe6","label":"text","name":"text","type":"wysiwyg","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"default_value":"","tabs":"all","toolbar":"full","media_upload":1,"delay":0}]}],"location":[[{"param":"options_page","operator":"==","value":"acf-options"}]],"menu_order":0,"position":"normal","style":"default","label_placement":"top","instruction_placement":"label","hide_on_screen":"","active":true,"description":""}]
*/