Show og hide HTML-elementer

Beskrivelse af Show / Hide

Særligt for 'hide* og 'show' er det, at elementet vises / skjules med udgangspunkt i enten øverste venstre eller højre hjørne af den omgivende container

  • 'hide' og 'show' animerer på både elementets bredde og højde samtidig
  • animationen tager udganspunkt i den omgivende containers øverste venstre eller højre hjørne
  • 'hide' og 'show' animerer med en default hastighed på 400 ms
  • hastigheden kan justeres med en ord- eller tal-værdi

hide

Skjul elementet ved at klikke:

$('.box').click(function() { 	
	$(this).hide(); 
});		
  • 'hide' bruges kun på synlige elementer
  • animationen har udgangspunkt i øverste venstre hjørne af den omgivende container

show

Vis elementet ved at klikke på knappen - udgangspunktet er øverste højre hjørne på grund af 'float: right':

$('button').click(function() { 	
	$('.box').show('slow'); 
});		
.box {
    float: right;
    display: none;
}	
  • 'show' bruges kun på skjulte elementer
  • med float: right har animationen udgangspunkt i øverste højre hjørne af den omgivende container

toggle mellem hide og show

Skift mellem skjult tilstand og synlighed vad at klikke på knappen:

SKJUL
$('button').click(function() { 	
	$('.box').toggle(); 
});