You display data in loop, so all item have the same ID div id="demo"
. Add some suffix to make them unique. For example:
$lang = substr($field['name'], strpos($field['name'], "_");
echo '<button data-toggle="collapse" data-target="#demo-'. $lang .'"> ....';
echo '<div id="demo-'. $lang .'" class="collapse"> ...</div>'
Edit
Audio doesn’t work inside the collapse panel because key $name
never meets both conditions:
if (stripos($name, 'isbn') !== false):
if (stripos($name, 'hoerprobe') !== false)
$name
is either hoerprobe_arabisch or isbn_arabisch.
Try this code:
if (stripos($name, 'isbn') !== false) : ?>
<?php $lang = substr($field['name'], strpos($field['name'], "_")); ?>
<button data-toggle="collapse" data-target="#demo<?php echo $lang ?>">
Deutsch/<?php echo substr($field['label'], strpos($field['label'], " ") + 1); ?> </button>
<div id="demo<?php echo $lang ?>" class="collapse">
Lorem ipsum dolor text....
<?php //isbn
echo $field['prepend'] . " " . $field['value']; ?> </br>
<?php //titel
echo the_field('titel'. $lang); ?> </br>
<?php //coverimage
$titelbild = get_field('titelbild' . $lang); ?>
<?php if ($titelbild) : ?>
<img src="https://wordpress.stackexchange.com/questions/309536/<?php echo $titelbild["url']; ?>" alt="https://wordpress.stackexchange.com/questions/309536/<?php echo $titelbild["alt']; ?>"/>
<?php endif; ?></br>
if (isset($fields['hoerprobe_'.$lang])) : ?>
<?php
$hoerprobe_field_name="hoerprobe".$lang;
$hoerprobe_field = $fields[$hoerprobe_field_name ];
echo $hoerprobe_field['label'];
$file = get_field(hoerprobe_field_name); ?>
<audio controls>
<source src="https://wordpress.stackexchange.com/questions/309536/<?php echo $file["url']; ?>">
Your browser does not support the audio tag.
</audio></br>
<?php endif;
</div>
<?php endif;