www.tuljo.com

Expanding collapsing sliding jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>

Sample 1

<div id="mySlideContent">
	EXPANDING COLLAPSING DIV (slideContent)
</div>
<div id="mySlideToggler">
	EXPANDING COLLAPSING DIV (slideToggler)
</div>

<script type="text/javascript">
	$(function(){
		$('#mySlideContent').css('display','none');
		$('#mySlideToggler').click(function(){
			$('#mySlideContent').slideToggle('slow');
			$(this).toggleClass('slideSign');
			return false;
		});
	});
</script>

.slideSign{
	color:#f00;
}

Sample 2 - a close button inside slider

<div class="slideToggler2">
	click to open an EXPANDING COLLAPSING DIV
</div>
<div class="slideContent2">
	content content content <span class="collaps2"><b>CLOSE</b></span>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$('.slideToggler2').click(function(){
			$('.slideContent2').slideToggle('slow');
			$(this).toggleClass('slideSign2');
			return false;
		});
		$('.collaps2').click(function(){
			$('.slideContent2').slideToggle('slow');
			$('.slideToggler2').toggleClass('slideSign2');
			return false;
		});
	});
</script>

Sample 3

Click this: EXPANDING COLLAPSING DIV +

To change the initial state to be expanded, remove the style="display:none".

<h4 id="expanderHead" style="cursor:pointer;">
	EXPANDING COLLAPSING DIV <span id="expanderSign">+</span>
</h4>
<div id="expanderContent" style="display:none">
	content<br />
	content<br />
	content<br />
	content<br />
	content<br />
</div>

<script type="text/javascript">
$(document).ready(function(){
	$("#expanderHead").click(function(){
		$("#expanderContent").slideToggle();
		if ($("#expanderSign").text() == "+"){
			$("#expanderSign").html("−")
		}
		else {
			$("#expanderSign").text("+")
		}
	});
});
</script>

Sample 4 - universal slide toggler, one jQuery script for all slides on the page

All sliders on the page or all over the site use the same one jQuery script.

<p class="toggler" id="toggler-slideOne">
	<span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span>
</p>
<div class="slider" id="slideOne">
	<p>Slide One lorem ipsum opsum...</p>
	<span class="closeSlider">Close</span>
</div>

<p class="toggler" id="toggler-slideTwo">
	<span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span>
</p>
<div class="slider" id="slideTwo">
	<p>Slide Two lorem ipsum tupsum...</p>
	<span class="closeSlider">Close</span>
</div>

function toggleSlides(){
	$('.toggler').click(function(e){
		var id=$(this).attr('id');
		var widgetId=id.substring(id.indexOf('-')+1,id.length);
		$('#'+widgetId).slideToggle();
		$(this).toggleClass('sliderExpanded');
		$('.closeSlider').click(function(){
				$(this).parent().hide('slow');
				var relatedToggler='toggler-'+$(this).parent().attr('id');
				$('#'+relatedToggler).removeClass('sliderExpanded');
		});
	});
};
$(function(){
	toggleSlides();
});

.slider{
	display:none;
}
.collapseSlider{
	display:none;
}
.sliderExpanded .collapseSlider{
	display:block;
}
.sliderExpanded .expandSlider{
	display:none;
}

2009, 2010, 2011.

Web Development - XHTML CSS JavaScript jQuery.