Recolhendo DIV com JQuery

Simples artigo que aborda os fundamentos de como recolher DIVs com JQuery.

Publicado em 13/02/2016 03:33

Recolher e exibir DIV é um recurso presente em quase todas as aplicações WEB, e até mesmo em aplicações Mobile e Desktop este recurso é utilizado.

Sua funcionalidade é muito simples e é possível de ser realizado apenas com o CSS, na verdade o JQuery e o Javascript nativo manipulam uma propriedade CSS, como por exemplo o Display.

Basicamente precisamos de um elemento HTML (DOM) para disparar a ação e uma DIV, que terá os comportamentos estabelecidos pelo JQuery. Quando houver o click em um botão, o JQuery irá executar uma operação interna que exibe ou oculta um determinado elemento. Em termos mais técnicos, quando um botão for pressionado, será disparado o evento Click para aquele botão em seguida o JQuery irá acessar o elemento que será ocultado/exibido e alterar sua visibilidade aplicando um efeito.

Observe o código abaixo, note que ele contém uma div com uma class dvPrincipal, que tem por responsabilidade abrigar as outras duas DIVs, a segunda DIV com a class dvBarra abriga dois elementos span, um com o texto da barra e outro para ser um botão, na qual tem um id chamado de btnClick, por último a DIV com o id dvConteudo, que contém vários textos e será ela exibida e ocultada.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Recolhendo DIV</title>
		<meta charset="utf-8" />
		<script src="jquery-2.1.3.min.js"></script>
		<script>
			$(document).ready(function(){
				$("#btnClick").click(function(){
					$("#dvConteudo").slideToggle("fast");
					
					if($("#btnClick").html() == "+"){
						$("#btnClick").text("-");
					}else{
						$("#btnClick").text("+");
					}
					
				});
			});
		</script>
		<style>
			.dvPrincipal{
				width:100%;
				max-width: 500px;
				background-color: #87CEFA;
			}
			
			.dvBarra{
				background-color: #1E90FF;
				padding: 5px;
				color: #FFF;
				font-weight: bold;
				font-family: Segoe UI;
			}
			
			#btnClick{
				cursor: pointer;
				font-size: 20px;
				color: #FFF;
				margin-right:5px;
			}
			
			#btnClick:hover{
				color: #AFEEEE;
			}
			
			#dvConteudo{
				/*Determinando o estado inicial da DIV, como oculta*/
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="dvPrincipal">
			<div class="dvBarra">
				<span>Aqui vem seu Título <span id="btnClick">+</span></span>
			</div>
			
			<div id="dvConteudo">
				<!--Dentro desta DIV vem o conteúdo, seja vídeo, imagem ou texto-->
				<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
				<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
				<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
				<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
			</div>
		</div>
	</body>
</html>

Para que o código acima funcione, você já deve saber que o JQuery deve estar incorporado em seu documento, o site oficial é https://jquery.com.

Para entender melhor ainda o funcionamento e como os elementos foram montados, veja a imagem a seguir.

A função do slideToggle() do JQuery tem por objetivo intercalar a visibilidade, ou seja, cada vez que for chamada ela fará o inverso do estado visível atual, se estiver exibido ela vai ocultar e se estiver ocultado será exibido. Para chamar esta função usamos o evento click do botão btnClick.

Note que existe uma condição if, que verifica o texto do botão, para que sempre seja exibido + para expandir e – para recolher.

Código 02:

<script>
			$(document).ready(function(){
				$("#btnClick").click(function(){
					$("#dvConteudo").slideToggle("fast");
					
					if($("#btnClick").html() == "+"){
						$("#btnClick").text("-");
					}else{
						$("#btnClick").text("+");
					}
					
				});
			});
</script>

Até a próxima!!! ;D