2014 2013 2012

Pinpoint Design
New York, NY 10024

Contact Us

September 18, 2013
jQuery agenda table with expand/collapse rows.



An agenda page can get long and boring so I used a nifty jQuery script that can expand and collapse the rows.

RAW

<script type="text/javascript">
$(document).ready(function(){
	$(".toggle_container").hide();
	$("div.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
	});
	
	$("#collapse").hide();
	
	$("#expand").click(function(){
		$("div.trigger").addClass("active").next().slideDown("slow");
		$("#expand").hide();
		$("#collapse").show();
		return false;
	});
	
	$("#collapse").click(function(){
		$("div.trigger").removeClass("active").next().slideUp("slow");
		$("#expand").show();
		$("#collapse").hide();
		return false;
	});

        $("#reset_filter").hide();
});

function filter_topic( topic_id ) {
    $(".trigger").hide();
    $(".trigger").removeClass("active");
    $(".toggle_container").hide();
    $(".trigger.topic-"+topic_id).show();
    $(".trigger.topic-"+topic_id).addClass("active");
    $("#reset_filter").show();
}

function reset_filter() {
    $(".trigger").show();
    $(".trigger").addClass("active");
    $(".toggle_container").hide();
    $("#reset_filter").hide();
}
</script>

DEMO