2

He estado intentando agregar un botón de "ver más" pero no consigo que funcione ninguno de los que he probado hasta ahora, esté es mi HTML:

   //En el primer "ver más" se aprecia que hay una función en el onclick, es esta:

function showMore() {
  document.getElementsByClassName("texto-oculto").style.visibility = "visible";
}
.contenido-oculto {
  visibility: hidden;
}
<div id="proyectos-size">
  <div class="proyectos-content">
    <ul id="proyectos-list">
      <l1>
        <h2 class="proyectos-title">Sectores</h2>
      </l1>

      <li>
        <h3>Industrial</h3>
        <div id="pic-ind" alt="Sector Industrial Fotovoltaico"></div>
        <p>Actualmente México vive una serie de reformas estructurales que hacen que la industria en México se transforme con raídez. Es aquí donde se crea la pauta para que las industrias inviertan en la reparación y modernización de sus instalaciones y
          encuentren un estímulo para generar su propia energía.<br>
          <a href="#proyectos-size" onclick="showMore()">Ver m&aacute;s</a></p>
        <div class="texto-oculto">hdsafligsdflgasldgfalisgfilasdugfoulaisgyf</div>
      </li>

      <li>
        <h3>Comercial</h3>
        <div id="pic-com" clat="Sector Comercial Fotovoltaico"></div>
        <p>Nuestros servicios en el sector comercial van enfocados a las pequeñas y medianas empresas (PyMEs) que buscan un proveedor de servicios confiable, de respuesta inmediata y costeable, para hacer reparaciones, remodelaciones en sus instalaciones
          o reducir la facturación eléctrica a travez de proyectos de energías renovables o instalación de subestaciones.<br><a href="">Ver m&aacute;s</a></p>
      </li>

      <li>
        <h3>Residencial</h3>
        <div id="pic-res" alt="Sector Residencial Fotovoltaico"></div>
        <p>Nuestros servicios en el sector residencial van enfocados a los hogares que por su ritmo de vida requieren estar en perfectas condiciones, donde la finalidad es mantener en buen estado el inmueble, generar ahorros instantáneos, obteniendo beneficios
          económicos durante la vida útil de las instalaciones y evitar daños al medio ambiente convirtiéndolos en hogares sustentables y autosuficientes.<br><a href="">Ver m&aacute;s</a></p>
        <div class="contenido-oculto>Contenido que se supone no deber&iacute;a ser apreciable hasta dar click en ver m&aacute;s</div>
    			</li> 
    		 </ul>
    		</div> 
    	 </div>

De nuevo, no se que estoy haciendo mal, tratando de implementar algunos ejemplos de codepen.io tampoco funcionó.

1 respuesta 1

4

Te faltan los identificadores de post, que son muy importantes.

Y no tienes necesidad de Javascript para hacerlo. Este ejemplo de Codepen muestra como hacerlo sólo con HTML/CSS. Se parece al tuyo, y aquí lo tienes adaptado.

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state~.read-more-trigger:before {
  content: 'Ver más';
}

.read-more-state:checked~.read-more-trigger:before {
  content: 'Ver menos';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}


/* Other style */

body {
  padding: 2%;
}

p {
  padding: 2%;
  background: #fff9c6;
  color: #c7b27e;
  border: 1px solid #fce29f;
  border-radius: .25em;
}
<div id="proyectos-size">
  <div class="proyectos-content">
    <ul id="proyectos-list">
      <l1>
        <h2 class="proyectos-title">Sectores</h2>
      </l1>
	  	<li>
        <h3>Industrial</h3>
		</li>
        <div>
          <input type="checkbox" class="read-more-state" id="post-1" />

          <p class="read-more-wrap">Actualmente México vive una serie de reformas estructurales que hacen que la industria en México se transforme con raídez. Es aquí donde se crea la pauta para que las industrias inviertan en la reparación y modernización de sus instalaciones
            y encuentren un estímulo para generar su propia energía.<span class="read-more-target"><br />hdsafligsdflgasldgfalisgfilasdugfoulaisgyf<br />Lorem ipsum dolor sit amet</span></p>

          <label for="post-1" class="read-more-trigger"></label>
        </div>
        <li>
       <h3>Comercial</h3>
        </li>
        <div>
          <input type="checkbox" class="read-more-state" id="post-2" />

          <p class="read-more-wrap">Nuestros servicios en el sector comercial van enfocados a las pequeñas y medianas empresas (PyMEs) que buscan un proveedor de servicios confiable, de respuesta inmediata y costeable, para hacer reparaciones, remodelaciones en sus instalaciones o reducir la facturación eléctrica a travez de proyectos de energías renovables o instalación de subestaciones.<span class="read-more-target"><br />Aquí todo el texto de ver más comercial<br />Lorem ipsum dolor sit amet</span></p>

          <label for="post-2" class="read-more-trigger"></label>
        </div> 
        <li>
       <h3>Residencial</h3>
        </li>
        <div>
          <input type="checkbox" class="read-more-state" id="post-3" />

          <p class="read-more-wrap">Nuestros servicios en el sector residencial van enfocados a los hogares que por su ritmo de vida requieren estar en perfectas condiciones, donde la finalidad es mantener en buen estado el inmueble, generar ahorros instantáneos, obteniendo beneficios económicos durante la vida útil de las instalaciones y evitar daños al medio ambiente convirtiéndolos en hogares sustentables y autosuficientes.<span class="read-more-target"><br />Aquí todo el texto de ver más Residencial<br />Lorem ipsum dolor sit amet</span></p>

          <label for="post-3" class="read-more-trigger"></label>
        </div> 
        
    </ul>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.