Base: Uso de elemento <a>
, y seteo de elemento colapsable
Para implementar el efecto collapse, como buscas que se haga click sobre una imagen, puedes usar un elemento <a>
en el que adentro tengas tu imagen.
<a>
<img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg">
</a>
Por otro lado, para poder tener el efecto collapse, el texto debe estar dentro de un elemento con la clase collapse
. Además, el elemento debe tener el atributo id
que permita a este elemento ser asignado como objetivo.
<div id="myText" class="collapse">
<!-- Texto -->
</div>
Tu elemento base quedaría así:
<div class="col-sm-3">
<a>
<img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg">
</a>
<br/>
<br/>
<div id="myText" class="collapse">
<!-- Texto -->
</div>
</div>
Dependiendo de como te parezca más conveniente, lo puedes implementar de dos formas:
- Mediante los atributos
href
y data-toggle
- Mediante jQuery
Opción 1: Implementación de elementos colapsables mediante atributos href
y data-toggle
A ese mismo elemento de link, le debes agregar los atributos href
y data-toggle
.
El atributo href
debe tener en su valor la id
del elemento objetivo con el efecto collapse.
Por su parte, el atributo data-toggle
debe tener el valor collapse.
<div class="col-sm-3">
<a href="#myText" data-toggle="collapse">
<img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg"/>
</a>
<br/>
<br/>
<div id="myText" class="collapse">
<!-- Texto -->
</div>
</div>
Llevado a tu código (con algunas correcciones menores, y usando imágenes placeholder) se traduce en lo que viene a continuación. El efecto collapse lo puedes ver mejor a pantalla completa.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-2"></div>
<div class="col-sm-3">
<a href="#myText1" data-toggle="collapse">
<img class="img-responsive center-block" src="http://via.placeholder.com/350x150">
</a>
<br/>
<br/>
<div id="myText1" class="collapse">
<h4 style="text-align:center"><b>José Miguel</b><br/>Estilista Integral</h4>
</div>
</div>
<div class="col-sm-3">
<a href="#myText2" data-toggle="collapse">
<img class="img-responsive center-block" src="http://via.placeholder.com/350x150" />
</a>
<br/>
<br/>
<div id="myText2" class="collapse">
<h4 style="text-align:center"><b>Lucia Jaimes</b><br/>Estilista Integral</h4>
</div>
</div>
<div class="col-sm-3">
<a href="#myText3" data-toggle="collapse">
<img class="img-responsive center-block" src="http://via.placeholder.com/350x150">
</a>
<br/>
<br/>
<div id="myText3" class="collapse">
<h4 style="text-align:center"><b>Natalia Torres</b><br/>Estilista Integral</h4>
</div>
</div>
<div class="col-md-2"></div>
Opción 2: Implementación de elementos colapsables mediante jQuery
Para este caso, cabe destacar que lo que viene a continuación no es la única forma de implementación que puedes usar con jQuery.
Para el elemento de link, vas a necesitar el atributo href
con el valor de id
del elemento colapsable, y una id
que la vas a necesitar en tu código:
<div class="col-sm-3">
<a id="#linkToText" href="#myText">
<img class="img-responsive center-block" src="ruta/de/tu/imagen.jpg">
</a>
<br>
<br>
<div id="myText" class="collapse">
<!-- Texto -->
</div>
</div>
Ahora se procede a programar el comportamiento colapsable. Para ello se usa el método .collapse()
y el evento click
, de modo que al hacer click en el elemento de link, se muestra u oculta el elemento con el texto, con efecto collapse.
$("#linkToText").on("click", function() {
$("#myText").collapse("toggle");
});
Traducido a tu código, quedaría como viene a continuación. El efecto collapse lo puedes ver mejor a pantalla completa.
$(document).ready(function() {
$("#linkToText1").on("click", function() {
$("#myText1").collapse("toggle");
});
$("#linkToText2").on("click", function() {
$("#myText2").collapse("toggle");
});
$("#linkToText3").on("click", function() {
$("#myText3").collapse("toggle");
});
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-2"></div>
<div class="col-sm-3">
<a id="linkToText1" href="#myText">
<img class="img-responsive center-block" src="http://via.placeholder.com/350x150">
</a>
<br>
<br>
<div id="myText1" class="collapse">
<h4 style="text-align:center"><b>José Miguel</b><br/>Estilista Integral</h4>
</div>
</div>
<div class="col-sm-3">
<a id="linkToText2" href="#myText2">
<img class="img-responsive center-block" src="http://via.placeholder.com/350x150" />
</a>
<br>
<br>
<div id="myText2" class="collapse">
<h4 style="text-align:center"><b>Lucia Jaimes</b><br/>Estilista Integral</h4>
</div>
</div>
<div class="col-sm-3">
<a id="linkToText3" href="#myText3">
<img class="img-responsive center-block" src="http://via.placeholder.com/350x150" />
</a>
<br>
<br>
<div id="myText3" class="collapse">
<h4 style="text-align:center"><b>Natalia Torres</b><br/>Estilista Integral</h4>
</div>
</div>
Véase también
collapse
y los atributosid
,data-toggle
ydata-target
. Otra forma es hacer que mediante jQuery, de forma manual, actives el despliegue/colapsamiento de tu(s) texto(s). Como se va a implementar, depende de como tú lo definas. Por ello, me gustaría poder ver el código de lo que estás haciendo.