<?php
/*
    Template Name: Прейскурант
    Template Post Type: page
*/
?>
<?php get_header(); ?>
<div class="section__margin">
	<div class="container">
<!-- 	<?php echo get_field('accordion2'); ?> -->
		<?php
    $banner_field = get_field_objects(7);
?>  


<h3 class="service__title title space-title">Прейскурант</h3>

<div id="accordeon">
<?php foreach($banner_field['element']['value'] as $item) { ?>
	<div class="one_acc cardd">
		<div class="acc-head cardd__title"><?php echo $item['card_title'] ?><div style="float: right;font-size: 13px; color: #81b259;">
<svg class="arrow-bottom" viewBox="0 0 9 14" height="20px" width="20px">
<path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z"></path>
</svg></div>
</div>
		<div class="acc-body cardd__body" style="display:none">
		<?php foreach($item['usluga'] as $item2) { ?>
			<div class="cardd__element">
				<div class="cardd__name"><?php echo $item2['card_name'] ?></div>
				<div class="cardd__price"><?php echo $item2['card_price'] ?></div>
			</div>
			<?php }?>
		</div>
		
	</div>
	<?php }?>
</div>

	</div>
	</div>


<?php get_footer(); ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" ></script>
	<script>
$(document).ready(function() {
  //прикрепляем клик по заголовкам acc-head
	$('#accordeon .one_acc').on('click', f_acc);
});
 
function f_acc(){
//скрываем все кроме того, что должны открыть
 // $('#accordeon .acc-body').not($(this).next()).slideUp(1000);
// открываем или скрываем блок под заголовком, по которому кликнули
    $(this).find('.acc-body').slideToggle(2000);
    $(this).find('.acc-head').toggleClass('acc-act'); 
	$(this).find('.arrow-bottom').toggleClass('rotate');	

}
</script>