Switch List Displays with JQuery and CSS

Sometimes it is useful to allow users to quickly change how data is displayed. Changing the display can make is easier to see patterns or find a specific item you are looking for. With CSS and jQuery we can easily change the way content is displayed and arranged on the page.  I got the idea for this post from here  

Basically by changing the class assigned to a div wrapping the content we are able to change the way things are laid out and hide what we don’t need.  Here how I set it up in SharePoint.  

• I started with a standard Image library and added some images of one of my bikes.  I filled in the title and description for each item.  You can use this same technique on other types of lists.
• Next I created a page and displayed the list in a dataview web part
• I edited the XSL to show the items in an unordered list with a class of  ‘display’. Inside of each <li> I used various tags and classes to style the images and descriptions.

  <li class="ms-vb">
  <div class="content_block">
  	<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}">
  	<img align="left" border="0" src="{concat($FileURL,'/_t/',$FileNameNoEx,'_',@FileType,'.',@FileType)}" alt="{@Title}"/>
  	</a>
  	<h2>
  		<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}"><xsl:value-of select="@Title" disable-output-escaping="yes"/></a>
  	</h2>
  	<p><xsl:value-of select="@Description" disable-output-escaping="yes"/></p>
  </div>
  </li>
  

• Before the opening <ul> tag I added the link to my CSS and jQuery files as well as some script to trigger the switch and the associated link.

  <link href="styles.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  	$("a.switch_thumb").toggle(function(){
  	$(this).addClass("swap");
  	$("ul.display").fadeOut("fast", function() {
  		$(this).fadeIn("fast").addClass("thumb_view"); 
  //  thumb_view is the class used for the alternate display style 
  		});	  },
  		function () {
  		 $(this).removeClass("swap");
  		$("ul.display").fadeOut("fast", function() {
  			$(this).fadeIn("fast").removeClass("thumb_view");
  		}); }); });
  </script>
  <a href="#" class="switch_thumb">Switch Display</a> /* link to trigger the switch */
  

• Then I wrote some css to style the list differently based on the class of the <ul>. 

Below is the xsl and the CSS I used.

XSL (includes the code above)

<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
		<xsl:param name="dvt_apos">'</xsl:param>
		<xsl:param name="url_PATH_INFO" />
		<xsl:param name="url_HTTP_HOST" />
		<xsl:variable name="dvt_1_automode">0</xsl:variable>
		<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
				<xsl:template name="dvt_1">
					<xsl:variable name="dvt_StyleName">BulTitl</xsl:variable>
					<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
					<link href="styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">
$(document).ready(function(){
	$("a.switch_thumb").toggle(function(){
	  $(this).addClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").addClass("thumb_view");
		 });
	  }, function () {
      $(this).removeClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").removeClass("thumb_view");
		});	}); });
</script> <a href="#" class="switch_thumb">Switch Display</a>
	<ul class="display">
		<xsl:call-template name="dvt_1.body">
			<xsl:with-param name="Rows" select="$Rows" />
		</xsl:call-template>
	</ul>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows" />
	<xsl:for-each select="$Rows">
		<xsl:call-template name="dvt_1.rowview" />
	</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<xsl:param name="FileNameString" select="@NameOrTitle"></xsl:param>
		<xsl:param name="FileNameLegnth" select=" string-length(@NameOrTitle) - 4"></xsl:param>
		<xsl:param name="FileNameNoEx" select=" substring(@NameOrTitle,1,$FileNameLegnth)"></xsl:param>
		<xsl:param name="FileURL" select="concat('http://',$url_HTTP_HOST,'/',@FileDirRef)"></xsl:param>
	<li class="ms-vb">
		<div class="content_block">
			<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}">
				<img align="left" border="0" src="{concat($FileURL,'/_t/',$FileNameNoEx,'_',@FileType,'.',@FileType)}" alt="{@Title}"/>
			</a>
			<h2>
				<a href="{concat($FileURL,'/Forms/DispForm.aspx?ID=',@ID)}"><xsl:value-of select="@Title" disable-output-escaping="yes"/></a>
			</h2>
			<p><xsl:value-of select="@Description" disable-output-escaping="yes"/></p>
			</div>
		</li>
		</xsl:template>
</xsl:stylesheet></Xsl>

CSS

/* normal view styles */
ul.display li a {
    text-decoration: none;
}
ul.display li{
	background:#E3EFFF;
	margin:3px;
	border:1px solid #9FC2F1;
	height:130px;
	list-style:none;
}

ul.display li .content_block {
    padding: 5px;
	clear:both;
    margin:4px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 2px;
    font-weight: normal;
    font-size: 1.4em;
}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 145px;
    font-size: 1.2em;
}
ul.display li .content_block img{
    padding: 5px;
    border: 4px solid #336699;
    background: #fff;
    margin: 2 9px 2 2;
float: left;
}
/* thumbnail view styles */
ul.thumb_view li{ width: 200px; float:left; background:transparent; }
ul.thumb_view li h2 { display: inline; text-align:center; margin:2px; padding:2px }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 5 0 10px; }
/* styles for the style switcher buttin */
a.switch_thumb {

	padding:5 5 5 25px;
	margin:10px;
	background:#D6E8FF url('/_layouts/images/itcat.gif') no-repeat 5px 7px;
	outline: none;
	border:1px solid #9FC2F1;
	font-size:.8em;
}
a:hover.switch_thumb {
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background:url('/_layouts/images/itcontct.gif') no-repeat 5px 7px; }

If you want to use this same solution for a different type of list just create a dataview Web Part to display the items in the format you want and wrap everything in a container (div, ul, table) with a class. Also use tags (h2, p, span, div, etc.) to wrap the pieces of data you are displaying (this will make it easier to control with CSS). Change the CSS and JavaScript to work with you new container and XSL.

Got questions? Post a comment.