0

Tengo un texto dentro de un div con un párrafo (<p></p>) que quiero ocultar con otro div encima

Para lograrlo hice con la ayuda collapse de bootstrap.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!--Panel de Historial de mensajes-->
<div class="panel panel-success">
	<div class="panel-body">
		<!--Encabezado del historial-->
		<div>
			<div class="col-xs-10">
				<div class="col-xs-2">
					<img src="~/img/kreston/2016 KRESTONZAC INTELEGIS - sobre fondo Blanco.png" alt="imgUser" class="img-responsive img-circle" />
				</div>
				<div class="col-xs-10">Fulanito > Menganito</div>
			</div>
			<div class="pull-right col-xs-2 triangulo-no-favoritos">
				<button class="btn btn-link" title="Favoritos">
					<i class="fa fa-star-o" id="favorito"></i>
				</button>
			</div>
		</div>
		<!--Cuerpo del Historial-->
		<div class="col-sm-12">
			<div class="col-sm-1 icono">
				<i class="fa fa-comments"></i>
			</div>
			<div class="col-sm-11">
				<div>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat.
				</div>
				<div class="collapse" id="collapseExample">
					Aliquam rutrum, quam quis sodales hendrerit, mi nisl pellentesque felis, sed ornare magna magna sit amet lacus. Donec ligula justo, varius eget tristique vel, ultricies eget nibh. Phasellus vel leo gravida, tempor orci volutpat, sodales ex. Donec ac arcu nulla. Sed feugiat imperdiet purus vel vehicula. In aliquam libero sed enim elementum, quis iaculis ante rutrum. Sed eget urna dictum, mattis felis vestibulum, scelerisque arcu. Fusce suscipit mi eu purus dapibus imperdiet. Fusce elit ante, semper placerat mi quis, laoreet euismod turpis.
				</div>
				<button id="masTexto" class="btn btn-link" style="border-top:1px solid #bdc3c7;width:100%;" title="Ver más" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
					<i class="fa fa-chevron-down" id="mas">Expande</i>
				</button>
			</div>
		</div>
		<!--Footer del historial-->
		<div class="col-sm-12">
			<div class="pull-right">Ayer, 12:35 PM</div>
		</div>
	</div>
</div>

Pero no me gusta ya que tendria que separar el texto a "X" cantidad de caracteres del parrafo y la otra parte colocarlo dentro del div.collapse.

Mi objetivo es lograr que todo el texto este dentro de un div y otro div por encima cubra la mayor parte del texto como la imagen

Imagen de referencia

Para explicar mejor mi objetivo en esta pagina de videojuegos en el apartado de "Acerca de este Juego" se oculta gran parte del texto, me gustaria hacer esa funcionabilidad

3
  • ¿Lo que quieres hacer en realidad es que se vea como el de la imagen?, ¿con el degradado o desvanecido?.. Si es así creo que necesitarías buscar otro tipo de control o de estilos, y lo de ponerle un div encima me parece que esta de mas... ¿Cómo esperas que sea el resultado final? el 14 dic. 2016 a las 18:10
  • @CristinaCarrascoAngulo hacerlo como la imagen no, la imagen solo era para explicarme mejor, quiero lograr lo que tengo hecho en el ejemplo pero que todo el texto este en un solo div y no separado
    – JuankGlezz
    el 14 dic. 2016 a las 18:24
  • Parece que ya te respondieron :-) el 14 dic. 2016 a las 19:28

3 respuestas 3

2

Ya que estas usando Bootstrap, podrías crear una clase (.minHeight, por ejemplo) y establecer que si esta esta junto con las clases .collapse sobrescriba las propiedades que originalmente tienen.

Así por ejemplo:

.minHeight.collapse {
    clear: both;
    height: 0;
    display: block;
    /* Alto minimo */
    min-height: 43px;
    overflow: hidden;
}
.minHeight.collapsing {
    clear: both;
    min-height: 43px;
}
.minHeight.collapse.in {
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!--Panel de Historial de mensajes-->
<div class="panel panel-success">
	<div class="panel-body">
		<!--Encabezado del historial-->
		<div>
			<div class="col-xs-10">
				<div class="col-xs-2">
					<img src="~/img/kreston/2016 KRESTONZAC INTELEGIS - sobre fondo Blanco.png" alt="imgUser" class="img-responsive img-circle" />
				</div>
				<div class="col-xs-10">Fulanito > Menganito</div>
			</div>
			<div class="pull-right col-xs-2 triangulo-no-favoritos">
				<button class="btn btn-link" title="Favoritos">
					<i class="fa fa-star-o" id="favorito"></i>
				</button>
			</div>
		</div>
		<!--Cuerpo del Historial-->
		<div class="col-sm-12">
			<div class="col-sm-1 icono">
				<i class="fa fa-comments"></i>
			</div>
			<div class="col-sm-11">
				<div class="minHeight collapse" id="collapseExample">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat.<br>
					Aliquam rutrum, quam quis sodales hendrerit, mi nisl pellentesque felis, sed ornare magna magna sit amet lacus. Donec ligula justo, varius eget tristique vel, ultricies eget nibh. Phasellus vel leo gravida, tempor orci volutpat, sodales ex. Donec ac arcu nulla. Sed feugiat imperdiet purus vel vehicula. In aliquam libero sed enim elementum, quis iaculis ante rutrum. Sed eget urna dictum, mattis felis vestibulum, scelerisque arcu. Fusce suscipit mi eu purus dapibus imperdiet. Fusce elit ante, semper placerat mi quis, laoreet euismod turpis.
				</div>
				<button id="masTexto" class="btn btn-link" style="border-top:1px solid #bdc3c7;width:100%;" title="Ver más" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
					<i class="fa fa-chevron-down" id="mas">Expande</i>
				</button>
			</div>
		</div>
		<!--Footer del historial-->
		<div class="col-sm-12">
			<div class="pull-right">Ayer, 12:35 PM</div>
		</div>
	</div>
</div>

2

No necesitas mucho andamiaje para hacerlo, solo un <div> y un <span> para manejar el click que expande el elemento y por ultimo, el css necesario.

La base de funcionamiento es:

1- Restringir el alto máximo con max-height y ocultar el sobrante con overflow: hidden.

2- En el evento click, restablecer el valor por defecto de max-height (haciendo que se expanda) y ocultar el botón de expansión.

Ejemplo:

$('.compact span').click(function() {
  $(this).hide();
  $(this).parent().addClass('expanded');
});
.compact {
  position: relative;
  background: black;
  color: white;
  padding: 5px;
  width: 200px;
  max-height: 200px;
  overflow: hidden;
}
.compact span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, black);
  color: red;
  line-height: 40px;
  text-align: right;
  padding-right: 20px;
}
.compact.expanded {
  max-height: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compact">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer
  condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat.
  <span>LEER MAS</span>
</div>

1

Here we go! Usando css y jquery:

$("i").click(function(){
 $(".texto").toggleClass("hide-text");
 $("#masTexto").toggleClass("padding-text");
 $(".texto").hasClass("hide-text") ? $(this).text("Leer menos")
 : $(this).text("Leer más") ;
});
#masTexto {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0.1)), to(rgba(50, 50, 50, 0.9)), color-stop(.8, #000));
  width: 100%;
  height: 4em;
  color: #28f;
  text-align: right;
  padding-top: 40px;
  margin-top : -70px;
}
.padding-text{
  margin-top : 25px !important;
  padding-top: -20px;
}

i { cursor: pointer; }

.texto{
  height: 7em;
  overflow: hidden;
}

.wrapper{
  background-color: #666;
  color: #FFF;  
}

.hide-text{
overflow: initial;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
<div class="texto">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer
  condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat.
  <br> Aliquam rutrum, quam quis sodales hendrerit, mi nisl pellentesque felis, sed ornare magna magna sit amet lacus. Donec ligula justo, varius eget tristique vel, ultricies eget nibh. Phasellus vel leo gravida, tempor orci volutpat, sodales ex. Donec ac
  arcu nulla. Sed feugiat imperdiet purus vel vehicula. In aliquam libero sed enim elementum, quis iaculis ante rutrum. Sed eget urna dictum, mattis felis vestibulum, scelerisque arcu. Fusce suscipit mi eu purus dapibus imperdiet. Fusce elit ante, semper
  placerat mi quis, laoreet euismod turpis.

</div>
<div id="masTexto">
  <br><br><i class="fa fa-chevron-down" id="mas">Leer más</i>
</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.