Recolhendo DIV com JQuery

Gunnar CorreaGunnar Correa13/02/2016 às 03:33:29 - 10.245 acessos

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


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.

Recolhendo div com jQuery

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


jquery artigo tutorial grátis divs recolher aplicação web programação web desenvolvimento slidetoggle função css

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários