¿Como puedo agregar un botón de “ver más” en este bloque de código?

publicado por: Anonymous

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:

_x000D_

_x000D_

   //En el primer "ver más" se aprecia que hay una función en el onclick, es esta:_x000D_
_x000D_
function showMore() {_x000D_
  document.getElementsByClassName("texto-oculto").style.visibility = "visible";_x000D_
}

_x000D_

.contenido-oculto {_x000D_
  visibility: hidden;_x000D_
}

_x000D_

<div id="proyectos-size">_x000D_
  <div class="proyectos-content">_x000D_
    <ul id="proyectos-list">_x000D_
      <l1>_x000D_
        <h2 class="proyectos-title">Sectores</h2>_x000D_
      </l1>_x000D_
_x000D_
      <li>_x000D_
        <h3>Industrial</h3>_x000D_
        <div id="pic-ind" alt="Sector Industrial Fotovoltaico"></div>_x000D_
        <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_x000D_
          encuentren un estímulo para generar su propia energía.<br>_x000D_
          <a href="#proyectos-size" onclick="showMore()">Ver m&aacute;s</a></p>_x000D_
        <div class="texto-oculto">hdsafligsdflgasldgfalisgfilasdugfoulaisgyf</div>_x000D_
      </li>_x000D_
_x000D_
      <li>_x000D_
        <h3>Comercial</h3>_x000D_
        <div id="pic-com" clat="Sector Comercial Fotovoltaico"></div>_x000D_
        <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_x000D_
          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>_x000D_
      </li>_x000D_
_x000D_
      <li>_x000D_
        <h3>Residencial</h3>_x000D_
        <div id="pic-res" alt="Sector Residencial Fotovoltaico"></div>_x000D_
        <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_x000D_
          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>_x000D_
        <div class="contenido-oculto>Contenido que se supone no deber&iacute;a ser apreciable hasta dar click en ver m&aacute;s</div>_x000D_
    			</li> _x000D_
    		 </ul>_x000D_
    		</div> _x000D_
    	 </div>

_x000D_

_x000D_

_x000D_

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

solución

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.

_x000D_

_x000D_

.read-more-state {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
.read-more-target {_x000D_
  opacity: 0;_x000D_
  max-height: 0;_x000D_
  font-size: 0;_x000D_
  transition: .25s ease;_x000D_
}_x000D_
_x000D_
.read-more-state:checked~.read-more-wrap .read-more-target {_x000D_
  opacity: 1;_x000D_
  font-size: inherit;_x000D_
  max-height: 999em;_x000D_
}_x000D_
_x000D_
.read-more-state~.read-more-trigger:before {_x000D_
  content: 'Ver más';_x000D_
}_x000D_
_x000D_
.read-more-state:checked~.read-more-trigger:before {_x000D_
  content: 'Ver menos';_x000D_
}_x000D_
_x000D_
.read-more-trigger {_x000D_
  cursor: pointer;_x000D_
  display: inline-block;_x000D_
  padding: 0 .5em;_x000D_
  color: #666;_x000D_
  font-size: .9em;_x000D_
  line-height: 2;_x000D_
  border: 1px solid #ddd;_x000D_
  border-radius: .25em;_x000D_
}_x000D_
_x000D_
_x000D_
/* Other style */_x000D_
_x000D_
body {_x000D_
  padding: 2%;_x000D_
}_x000D_
_x000D_
p {_x000D_
  padding: 2%;_x000D_
  background: #fff9c6;_x000D_
  color: #c7b27e;_x000D_
  border: 1px solid #fce29f;_x000D_
  border-radius: .25em;_x000D_
}

_x000D_

<div id="proyectos-size">_x000D_
  <div class="proyectos-content">_x000D_
    <ul id="proyectos-list">_x000D_
      <l1>_x000D_
        <h2 class="proyectos-title">Sectores</h2>_x000D_
      </l1>_x000D_
	  	<li>_x000D_
        <h3>Industrial</h3>_x000D_
		</li>_x000D_
        <div>_x000D_
          <input type="checkbox" class="read-more-state" id="post-1" />_x000D_
_x000D_
          <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_x000D_
            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>_x000D_
_x000D_
          <label for="post-1" class="read-more-trigger"></label>_x000D_
        </div>_x000D_
        <li>_x000D_
       <h3>Comercial</h3>_x000D_
        </li>_x000D_
        <div>_x000D_
          <input type="checkbox" class="read-more-state" id="post-2" />_x000D_
_x000D_
          <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>_x000D_
_x000D_
          <label for="post-2" class="read-more-trigger"></label>_x000D_
        </div> _x000D_
        <li>_x000D_
       <h3>Residencial</h3>_x000D_
        </li>_x000D_
        <div>_x000D_
          <input type="checkbox" class="read-more-state" id="post-3" />_x000D_
_x000D_
          <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>_x000D_
_x000D_
          <label for="post-3" class="read-more-trigger"></label>_x000D_
        </div> _x000D_
        _x000D_
    </ul>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *