www.tuljo.com

Toggle jQuery slider

One common toggle jQuery slider script for all sliders on the page. +/- signs.

Sample of toggle jQuery slider

Code, html and CSS of toggle jQuery slider

<div class="myToggler">
	<span class="togglerSign">＋</span>Toggler One
</div>
<div class="mySlider">
	Content of Slide One
</div>

<div class="myToggler">
	<span class="togglerSign">＋</span>Toggler Two
</div>
<div class="mySlider">
	Content of Slide Two
</div>

<script type="text/javascript">
	$(function(){
		$('.myToggler').click(function(e){
			$(this).next().slideToggle();
			var sign=$(this).children(':first');
			sign.text(sign.text() == '\uff0b'?'\uff0d':'\uff0b');
			e.preventDefault;
		});
	});
</script>

<style type="text/css">
	.myToggler{
		cursor:pointer;
	}
	.mySlider{
		display:none;
	}
</style>

UTF-8 signs u-ff0b and u-ff0d are plus and minus signs. Sign "-" on the keyboard isn't any minus but hyphen.

toggle jQuery, jQuery slider, toggle slide, toggle slidedown, toggle slidedown jquery, toggle slide in jquery, toggle slidedown slideup, toggle slideup slidedown, jquery toggle slide, jquery ui toggle slide, slider jquery, slider jquery ui, slider jquery plugin, slider jquery examples, slider jquery 2011, slider jquery tutorial, jquery slider.

.next() - Tree Traversal - Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

.slideToggle() - Sliding - Display or hide the matched elements with a sliding motion.

2011.

Web Development - XHTML CSS JavaScript jQuery.