Tengo un modal como el que que indico en el código. La cuestión es la siguiente: Si abren el modal, abajo de los 3 botones de Primer, Segundo y Tercer año debería mostrarse una imagen. Ahora, si uds clickean en alguno de los 3 botones, la información que se muestra a la derecha (o abajo si estás en un dispositivo móvil) cambia. Me gustaría tener 3 imágenes en lugar de una, y que al mismo tiempo que cambie el contenido cambie la imagen. ¿Alguna sugerencia? Muchas gracias
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="col-lg-4">
<div class="text-center services-boxes shadow rounded p-4 mt-4" style="height:30em;">
<div class="services-boxes-icon">
<svg class="bi bi-brightness-alt-high text-warning" width="8em" height="8em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.041 10.5h5.918a3 3 0 0 0-5.918 0zM4 11a4 4 0 1 1 8 0 .5.5 0 0 1-.5.5h-7A.5.5 0 0 1 4 11zm4-8a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm8 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zM4.464 7.464a.5.5 0 0 1-.707 0L2.343 6.05a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z"/>
</svg>
</div>
<div class="mt-2">
<h5 class="mb-0">Segundo Año</h5>
<div class="services-title-border"></div>
<p class="text-muted mt-3"> - Actividades de organización, mantenimiento y desarrollo de la fundación.</p>
<button class="btn btn-success mt-5" data-toggle="modal" data-target="#planTrienal2Modal"">Ver Más</button>
</div>
</div>
</div>
<!-- Modal Plan Trienal 2 año -->
<div class="modal fade" id="planTrienal2Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content" >
<div class="modal-header shadow" style="background-color: #31b164;">
<h2 class="modal-title" id="exampleModalLabel">Plan Trienal</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 col-md-4 mb-3">
<div class="list-group shadow" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action " id="list-home-list" data-toggle="list" href="#trienal12" role="tab" aria-controls="home">
<span class="mdi mdi-bank"></span> Primer Año
</a>
<a class="list-group-item list-group-item-action active" id="list-profile-list" data-toggle="list" href="#trienal22" role="tab" aria-controls="profile">
<span class="mdi mdi-cloud-search"></span> Segundo Año</a>
<a class="list-group-item list-group-item-action " id="list-messages-list" data-toggle="list" href="#trienal32" role="tab" aria-controls="messages">
<span class="mdi mdi-account-voice"></span> Tercer Año</a>
</div>
<div><img src="https://www.definicionabc.com/wp-content/uploads/codigo.jpg" alt="" class="shadow"
style="margin-top: 1em;
max-width: 100%;
border: solid 1px #31b164;
border-radius: 5px;
padding: 5px; "></div>
</div>
<div class="col-12 col-md-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show " id="trienal12" role="tabpanel" aria-labelledby="list-home-list">
<ul style="padding: 0;">
<li>
<p class=" shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-bank"></span> Organización de la fundación y de la sede social.
</p>
</li>
<li>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-plus"></span> Contratación y capacitación del plantel profesional.
</p>
</li>
<li>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-plus"></span> Contratación y capacitación del plantel administrativo.
</p>
</li>
<li>
<p class="shadow h5 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-group"></span> Integración de equipos interdisciplinarios.
</p>
</li>
<li>
<p class="shadow h5 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-group"></span> Investigación y relevamiento del estado de situación de las temáticas en el ámbito de la provincia
de Buenos Aires, a través del desarrollo de estudios que permitan identificar y conocer, por un lado,
la realidad y el contexto en el que se encuentran inmersas aquellas personas que sufren alguna discapacidad
y cuyo acceso al sistema de salud se encuentre restringido y/o vedado y, por el otro, el daño ambiental
provocado por las distintas acciones del hombre que tornen inminentemente necesaria la toma de medidas al respecto.
</p>
</li>
<li>
<p class="shadow h5 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-group"></span>
Implementación de vías de comunicación que faciliten y agilicen la obtención de respuestas y resultados
en relación al acceso al sistema de salud de la comunidad afectada.
</p>
</li>
<li>
<p class="shadow h5 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-group"></span> Campaña de difusión mediante los diferentes medios existentes (mailing, propaganda escrita, radial y televisiva),
con el objeto de informar a la comunidad sobre la existencia de la fundación y la labor desarrollada por ésta.
</p>
</li>
<li>
<p class="shadow h5 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-group"></span> Creación de una página web de la fundación.
</p>
</li>
</ul>
</div>
<div class="tab-pane fade show active" id="trienal22" role="tabpanel" aria-labelledby="list-home-list">
<ul style="padding: 0;">
<li>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-account-plus"></span>
Actividades de organización, mantenimiento y desarrollo de la fundación.
</p>
</li>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-search-web"></span>
Establecimiento de vínculos estratégicos y de intercambio con instituciones afines del sector público y/o privado, así como la celebración de convenios con asociaciones civiles, ONGs, universidades, sociedades, entidades diversas o personas que adhieran al objeto básico de la presente fundación.
</p>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-search-web"></span>
Desarrollo de conferencias, seminarios, talleres, debates y/o cualquier otro medio de formación y capacitación a cargo de personalidades destacadas en la materia.
</p>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-search-web"></span>
Organización de encuentros dirigidos a la comunidad afectada con el objeto de generar espacios de formación y acompañamiento social.
</p>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-search-web"></span>
Asesoramiento integral y asistencia a aquellas personas que sufren algún tipo de discapacidad y cuyos derechos se encuentran vulnerados por el actual sistema de salud.
</p>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-search-web"></span>
Estudio y elaboración de proyectos con el objetivo de mejorar la situación de vulnerabilidad en la que se encuentran las personas con discapacidad y el medio ambiante.
</p>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-search-web"></span>
Evaluación y retroalimentación.
</p>
</ul>
</div>
<div class="tab-pane fade show " id="trienal32" role="tabpanel" aria-labelledby="list-home-list">
<ul style="padding: 0;">
<li>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-bank"></span> Actividades de organización, mantenimiento y desarrollo de la fundación.
</p>
</li>
<li>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-bank"></span> Asesoramiento integral y asistencia a aquellas personas que sufren algún tipo de discapacidad y cuyos derechos se encuentran vulnerados por el actual sistema de salud.
</p>
</li>
<li>
<p class="shadow h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-bank"></span> Inicio y seguimiento de recursos administrativos y/o judiciales incoados a fin de salvaguardar los derechos de las personas afectadas y el medio ambiente.
</p>
</li>
<li>
<p class="h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-bank"></span> Presentación de los proyectos confeccionados a entidades del sector público y/o privado y al Estado nacional, provincial y/o municipal.
</p>
</li>
<li>
<p class="h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-bank"></span> Desarrollo de datos estadísticos obtenidos a partir de la puesta en funcionamiento de la presente fundación y su publicación.
</p>
</li>
<li>
<p class="h5 mb-3 text-muted mt-2 alert alert-secondary ">
<span class="mdi mdi-bank"></span> Evaluación y retroalimentación.
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>