Web development, coding & SEO

Expanding collapsing sliding jquery

All these expanding collapsing div code samples require JQuery.

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

Sample 1

 

<div id="slideContent-1">
	content (slideContent)
</div>
<div id="slideToggler-1">
	title (slideToggler)
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$('#slideToggler-1').click(function(){
			$('#slideContent-1').slideToggle('slow');
			$(this).toggleClass('slideSign');
			return false;
		});
	});
</script>

#slideContent-1{
	display:none;
}
.slideSign{
	color:#f00;
}

Sample 2 - a close button inside slider

 

<div class="slideToggler2">
	click to open
</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

heading +

 

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

<h4 id="expanderHead" style="cursor:pointer;">
	heading <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 - one script for all slides on the page

• All sliders on the page are using the same one script.
• When JavaScript is turned off, all sliders are open.
• preventDefault prevents page from reloading when a link is clicked.

toggle slide 1

Slide 1 slide 1 slide 1 slide 1 slide 1.

toggle slide 2

Slide 2 slide 2 slide 2 slide 2 slide 2

 

<h4 class="toggler collapsed" id="toggle-slide1">
	toggle slide 1
</h4>
<p class="slider" id="slide-slide1" >
	Slide 1 slide 1 slide 1 slide 1 slide 1.
</p>

<h4>
	<a class="toggler collapsed" id="toggle-slide2" href="#">toggle slide 2</a>
</h4>
<p class="slider" id="slide-slide2" >
	Slide 2 slide 2 slide 2 slide 2 slide 2
</p>

<script type="text/javascript">
	$(function(){
		$(".slider").hide();
		$(".toggler").click(
		function(x){
				var id=$(this).attr("id");
				var widgetId=id.substring(id.indexOf('-')+1,id.length);
				$("#slide-"+widgetId).slideToggle();
				$(this).toggleClass("collapsed")
				$(this).toggleClass("expanded")
				x.preventDefault();
				return false;
		});
	});
</script>

2009, 2010.

---