I have the following problem: Working with Bootstrap, I have a website that shows 12 properties in a thumb, each one with a button to see the details of the same, that button, opens a MODAL window of the property, where I have detailed information of the reference property. , which I extract from a table with PHP and MYSQL; Inside the window, there is a HEADER, CONTAINER and FOOTER. The CONTAINER is divided into two, on the left is a TAB PANEL with 2 tabs (DESCRIPTION and + INFO) and on the right a carousel showing some thumbnails of the property. Clicking to open the MODAL of the 1st. property, it shows perfect all the information of the property, both in the TAB CONTAINER and + INFO, now ... when I want to select any of the remaining 11 properties, in the TAB PANNEL tabs, the left, DESCRIPTION, works perfect , and the right + INFO does not work, you can not directly access it. I enclose the code block and a capture.
<!-- VENTANA MODAL DE LA PROPIEDAD -->
<div class="modal fade" tabindex="-1" role="dialog" id="<?php echo $prop['id']; ?>">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<!-- Titulo de la propiedad -->
<div class="col-md-8">
<h3><?php echo $prop['nombre']; ?></h3>
<p><strong><?php echo ".: Propiedad para " . $prop['plazas'] . " pasajeros :."; ?></strong></p>
</div>
<!-- Fin Titulo de la propiedad -->
<!-- Contactos y Web -->
<div class="col-md-4">
<a href="#">
<span class="hint--bottom-left" data-hint="Llamar por teléfono"><img src="../images/icons/celeste/telefono.png" width="50px"></span>
</a>
<a href="#">
<span class="hint--bottom-left" data-hint="Enviar un Email"><img src="../images/icons/celeste/mail.png" width="50px"></span>
</a>
<a href="#">
<span class="hint--bottom-left" data-hint="Ingresar a la web de la propiedad"><img src="../images/icons/celeste/web.png" width="50px"></span>
</a>
</div>
<!-- Fin Contactos y Web -->
</div>
<!-- Descripción de la propiedad -->
<div class="modal-body">
<div class="col-md-7">
<!-- TAB PANNEL -->
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTabs">
<li class="active">
<a href="#tab1primary" data-toggle="tab">DESCRIPCION</a>
</li>
<li>
<a href="#tab2primary" data-toggle="tab">+ INFO</a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">
<p><span>Descripción de la unidad</span><br><br>
<?php echo $prop['descripcion']; ?>
</p><br>
</div>
<div class="tab-pane fade" id="tab2primary">
<p>
<span>Lugar: </span><?php echo " ".$cn_lugar[$prop{'lugar'}]; ?>
</p>
<p>
<span>Dirección: </span><?php echo " ".$prop['ubicacion']; ?>
</p>
<p>
<span>Distancia al mar: </span>
<?php if ($prop['almar'] == 0): ?>
<?php echo " Frente al mar"; ?>
<?php else : ?>
<?php echo $prop['almar'] . " mts."; ?>
<?php endif; ?>
</p>
<p>
<span>Disponibilidad: </span><?php echo " ".$prop['disponibilidad']; ?>
</p>
</div>
</div>
</div>
</div>
<!-- FIN TAB PANNEL -->
<div class="icons clearfix">
<?php require '../componentes/iconos.php'; ?>
</div>
</div>
<div class="col-md-5">
<?php $total_imagenes = 0; ?>
<?php $carpeta = "../images/200x150/" . $prop['id'] . "/"; ?>
<?php $total_imagenes = count(glob(''.$carpeta.'{*.png,*.jpg}', GLOB_BRACE)); ?>
<?php $imagenes = glob(''.$carpeta.'{*.png,*.jpg}', GLOB_BRACE); ?>
<!-- Carousel -->
<div id="carouser-prop" class="carousel slide" data-ride="carousel">
<!-- Indicadores
<ol class="carousel-indicators">
<?php //for ($i=0; $i<$total_imagenes; $i++): ?>
<?php //if ($i == 0): ?>
<li data-target="#carousel-prop" data-slide-to="0" class="active"></li>
<?php //else : ?>
<li data-target="#carousel-prop" data-slide-to="<?php //echo $i; ?>"></li>
<?php //endif; ?>
<?php //endfor; ?>
</ol>
<!--Fin Indicadores -->
<!-- Contenedor del Slider -->
<div class="carousel-inner-mini" role="listbox">
<?php if ($total_imagenes == 0): ?>
<div class="item active">
<img src="../images/BannerProximamente200x150.png"/>
</div>
<?php else : ?>
<?php for ($i=0; $i<$total_imagenes; $i++): ?>
<?php if ($i == 0): ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>
<?php echo '<img src="' . $imagenes["$i"] . '"/>';?>
</div>
<?php endfor; ?>
<?php endif; ?>
</div>
<!-- Fin Contenedor del Slider -->
<!-- Controles <a class="left carousel-control" href="#carousel-prop" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-prop" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Fin Controles -->
</div>
<!-- Fin carousel -->
</div>
</div>
<!-- Fin descripción de la propiedad -->
<div class="modal-footer-right">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- FIN VENTANA MODAL DE LA PROPIEDAD -->
I have made the same system programmed within the MODAL window but this time with ACCORDION panels and the same error occurs, it shows me only the details of the first property and the rest does not work, there is someone who knows how to solve this ? Attached the code of the accordion:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
DESCRIPCION</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<p><span>Descripción de la unidad</span><br><br>
<?php echo $prop['descripcion']; ?>
</p><br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
+INFO</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>
<span>Lugar: </span><?php echo " ".$cn_lugar[$prop{'lugar'}]; ?>
</p>
<p>
<span>Dirección: </span><?php echo " ".$prop['ubicacion']; ?>
</p>
<p>
<span>Distancia al mar: </span>
<?php if ($prop['almar'] == 0): ?>
<?php echo " Frente al mar"; ?>
<?php else : ?>
<?php echo $prop['almar'] . " mts."; ?>
<?php endif; ?>
</p>
<p>
<span>Disponibilidad: </span><?php echo " ".$prop['disponibilidad']; ?>
</p>
</div>
</div>
</div>
</div>