Necesito hacer un portafolio de servicios, la cosa es que es a través de imágenes, ya tengo las imágenes ubicadas. Se me ocurrió la siguiente idea: al presionar una imagen un div con la información del producto aparecerá abajo del portafolio de servicios si el usuario presiona nuevamente el producto la información desaparece, de igual forma desaparece si el usuario le da click a otra imagen, al desaparecer la información anterior aparece la información del nuevo producto seleccionado. Intenté hacerlo con un contador de clicks pero no funcionó, ¿alguna idea?. De antemano gracias.
let contador=0;
imagen_portafolio_1.onclick=function(){
contador=++contador%2;
if (contador==1) {
document.getElementById('servicio1').style.display="inline-block";
document.getElementById('servicio2').style.display="none";
}else{
document.getElementById('servicio1').style.display="none";
}
return 0;
}
let subida=0;
imagen_portafolio_2.onclick=function(){
subida=++subida%2;
if (subida==1) {
document.getElementById('servicio2').style.display="inline-block";
}else if (contador==0 || subida==0) {}{
document.getElementById('servicio1').style.display="none";
document.getElementById('servicio2').style.display="none";
}
return 0;
}
<!-- PORTAFOLIO -->
<div class="contenedor_portafolio" id="contenedor_portafolio1">
<h1>Portafolio de servicios</h1>
<img src="http://conceptodefinicion.de/wp-content/uploads/2017/10/Host.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_1">
<img src="https://www.solbyte.com/blog/wp-content/uploads/el-dominio-es-la-cara-de-tu-negocio-en-internet.png" alt="" class="imagenes_portafolio" id="imagen_portafolio_2">
<img src="https://neetwork.com/wp-content/uploads/2017/12/18OPTIMIZACION-DEL-SITIO-WEB.png" alt="" class="imagenes_portafolio" id="imagen_portafolio_3">
<img src="https://seo.pe/wp-content/uploads/h9-image-3.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_4">
<img src="https://www.blog.andaluciaesdigital.es/wp-content/uploads/2019/06/pentesting_1024x512px.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_5">
<img src="https://www.vervesearch.com/wp-content/uploads/2014/10/blog-01-01.jpg" alt="" class="imagenes_portafolio">
<!-- DESCRIPCIÓN SERVICIOS -->
<div class="descripciones_servicios">
<div id="servicio1"><p>HOST<br>¿Qué es el HOSTING?<br>
Web Hosting es el servicio que provee el espacio en Internet para los sitios web. ... Si deseas crear tu página web y que otros puedan visitarla, vas a necesitar publicar o “subir” los archivos de tu sitiotexto e imágenes) a un servicio de web hosting. <br>
Nuestro servicio de host es el mejor.</p>
</div>
<div id="servicio2"><p>DOMINIO<br>Compra tu dominio de la forma más fácil</p></div>
<div id="servicio3"><p>POSICIONA TÚ PÁGINA<br> a través de nuestras ofertas únicas.</p></div>
<div id="servicio3"><p>¿YA TIENES UNA PÁGINA WEB?<br>Optimiza tu página antigua.</p></div>
<div id="servicio4"><p>SEGURIDAD <br>Realizamos PENTESTING, para que puedas solucionar los posibles fallos que tenga tú sistema.</p></div>
<div id="servicio5"><p>RESPONSIVE DISING<br>Adapta tu página de una forma única.</p></div>
</div>
</div>