jQuery elem elrejtése - felfedése.

$("....")     Szelektor.       Itt határozzuk meg, mely elemnél vagy elemeknél történjen az animáció.

hide()                           Elrejti a kiválasztott elemet, vagy elemeket.

show()                          Felfedi az elrejtett elemet.

toggle()                        Elrejti vagy Felfedi a kiválasztott elemet.
 
Metódusok zárójelei között, meghatározhatunk sebesség paramétert is.  "slow"(lassu),  "fast"(gyors),  vagy   milliseconds (idő).
Nem határozunk meg sebességet, akkor, azonnali végrehajtás történik.

<head>

<script>

$(document).ready(function(){

   $("#p01").click( function() {  $("#p01").hide();  } );
 
   $("#p02").click( function() {  $("#p02").hide();  } );
 
   $("#p03").click( function() {  $("p").hide();  } );

});

</script>

</head>

<body>

<p id="p01"> 1. Elem, és tartalmánek elrejtése. Kattints Ide!</p>

<p id="p02"> 2. Elem, és tartalmánek elrejtése. Kattints Ide!</p>

<p id="p03"> 3. Minden p elem, elrejtése. Kattints Ide!</p>

<body>

<script>
// Csak az első p elem elrejtése.
	     function Elrejt01() { $("p:first").hide(); }
// Felfedi az első elrejtett p elemet.
	     function Felfed01() { $("p:first").show(); }
// Csak a második p elem elrejtése.
	     function Elrejt02() { $("p:eq(1)").hide(); }
// Felfedi a második elrejtett p elemet.
	     function Felfed02() { $("p:eq(1)").show(); }
		 
// Minden p elem elrejtése és felfedése. --------------------
$(document).ready(function(){
    var fed=1;
        $("#mindenp").click(function(){ 
            if(fed==1) {$("p").hide(1000); fed=2;}
                  else {$("p").toggle(1000); fed=1;}
        });
});
</script>
</head>
<body>
<button onClick="Elrejt01()">   1. p elem elrejtése.</button>
<button onClick="Felfed01()">  1. p elem felfedése.</button>
<button onClick="Elrejt02()">   2. p elem elrejtése.</button>
<button onClick="Felfed02()">  2. p elem felfedése.</button>
<button id="mindenp" > Minden p elemet, elrejt / felfed.</button>

<p id="p01">
1. Elem, és tartalmánek elrejtése. Kattints Ide!
</p>

<p id="p02">
2. Elem, és tartalmánek elrejtése. Kattints Ide!
</p>

<p id="p03">
3. Minden p elem, és tartalmuk elrejtése. Kattints Ide!
</p>

<head>
<script>
$(document).ready(function(){
// Kiválasztott class="div01" azonosítóval rendelkező  elemek elrejtése és felfedése.
// ------ 1. Példa. ----------------------------------------------
	var fed=1;
	   $("#btn01").click(function(){ 
		if(fed==1) {$(".div01").hide(); fed=2;}
			else {$(".div01").show(); fed=1;}
		});
		
// ------ 2. Példa. ----------------------------------------------
	var fed=1;
	   $("#btn02").click(function(){ 
		if(fed==1) {$(".div01").hide("slow"); fed=2;}
			else {$(".div01").show("slow"); fed=1;}
		});	
		
// ------ 3. Példa. ----------------------------------------------
	   $("#btn03").click( function() { 
			     $(".div01").toggle(3000);
	   });
});
</script>
</head>
<body>
	<button id="btn01"> 1. Példa.<br /> Elrejtés / Felfedés.</button>
	<button id="btn02"> 2. Példa.<br /> Elrejtés / Felfedés.</button>
	<button id="btn03"> 3. Példa.<br /> Elrejtés / Felfedés.</button>

<div class="div01">
Ez a szövegtartalom div szakaszban helyezkedik el, melynek azonosítója class=div01
hide(), show(), toggle() metódusok zárójelei között, meghatározhatunk sebesség paramétert:

slow=lassu,
fast=gyors,
milliseconds=idő, melyet számok beírásával határozunk meg.

Ha, nem határozunk meg sebességet, akkor, azonnali végrehatás történik.
</div>

</body>

jQuery szelektor emlékeztető.

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

<script>
$(document).ready(function(){
     $("p").hide();          //  Elrejti az összes <p> elemet.

     $("#test").hide();    // Elrejti azt az elemet, melynek egyedi azonosítója: id="teszt".

     $(".teszt").hide();   // Elrejti az összes elemet, melyek class osztályazonosítója:  class="teszt".		 
}); 
 </script>
</head>

<body>


</body>