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.1
	// 12 march 2009
	// www.webart.ee
  	jQuery(document).ready(function(){

  		jQuery('.hide').hide();
		
		jQuery('.showhide').click(function(){
			if(jQuery(this).parent().next().attr('class') != 'hide'){
				jQuery(this).parent().next().slideUp('slow').addClass('hide').preventDefault;
				jQuery(this).html('Näita');
			} else {
				jQuery(this).parent().next().slideDown('slow').removeClass('hide').preventDefault;
				jQuery(this).html('Peida');
			}
		});

		jQuery('.showhider').toggle(function(){
  		  jQuery(this).parent().nextAll('div').slideDown('fast').removeClass('hide').preventDefault;
  		    jQuery(this).html('Peida kõik');
			jQuery('.showhide').html('Peida').preventDefault;
  		  },function(){
  		    jQuery(this).parent().nextAll('div').slideUp('fast').addClass('hide').preventDefault;
  		    jQuery(this).html('Näita kõiki');
			jQuery('.showhide').html('Näita').preventDefault;
  		})
		return false;
		
  	 });
	</script>
	
	

Muudatused (Näita)

	
	Versioon 1.1:
	

- Üksikelemendid avatakse ja suletakse nüüd click funktsiooni abil (kõrvaldab probleemid mis tekkisid seoses scripti multiavamise funktsiooniga).
- Multiavamise korral ei ole enam kindlate/unikaalsete klassinimede olemasolu vajalik
- jpm.

Versioon 1.0

Nõuded (Näita)

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