Näita kõiki

Multiple ShowHideBlock

Sissejuhatus (Näita)

Multiple ShowHideBlock võimaldab erinevaid blok elemente (div, p) elementide sisu näidata ja siis jälle peita.
Algallikaks: http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/ Andy Langton'i poolt kirjutatud kood.

Tagasiside

Võimalused (Näita)

Üksikelementide näitamine ja peitmine ning kõigi elementide korraga näitamine ja peitmine. Blokkide sees võimalik kasutada htmli (tabelid, listid, tekstivormingud)

Kohandamine (Näita)

Vaikimisi elementide selekteerimise korral võib tekkida probleeme kui kujunduslik pool keerulisem on:
jQuery(this).parent().nextAll('div').slideDown('slow').removeClass('hide').preventDefault;

Sellisel juhul on soovitatav kasutada selekteerimiseks kindlaid väärtusi:
jQuery('#container1,#container2,#container3,#container4').slideDown('slow').removeClass('hide').preventDefault;

Kasutamine (Näita)

	
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
	<!--
	// Multiple ShowHideBlock 1.0
	// www.webart.ee
	$(document).ready(function(){

		jQuery('.hide').hide();

		jQuery('.showhider').toggle(function(){
		  jQuery(this).parent().nextAll('div').slideDown('fast').removeClass('hide').preventDefault;
			jQuery(this).html('Peida kõik');
			jQuery('#link1,#link2,#link3,#link4,#link5').removeClass('hide').html('Peida').preventDefault;
		  },function(){
			jQuery(this).parent().nextAll('div').slideUp('fast').addClass('hide').preventDefault;
			jQuery(this).html('Näita kõiki');
			jQuery('#link1,#link2,#link3,#link4,#link5').addClass('hide').html('Näita').preventDefault;
		})

		jQuery('.showhide').toggle(function(){
		  jQuery(this).parent().next().slideDown('slow').removeClass('hide').preventDefault;
			jQuery(this).html('Peida');
		  },function(){
			jQuery(this).parent().next().slideUp('slow').addClass('hide').preventDefault;
			jQuery(this).html('Näita');
		})
		
	 });
	-->
	</script>
	
	

Nõuded (Näita)

Testitud jQuery versioonidega 1.2.6 & 1.3.2
Browseritest Firefox 3.0 ja IE 7