Sharepoint 2007, jQuery and Expand/Collapse Sections

One of the first uses for jQuery is to add some polish to your interface. For one Sharepoint 2007 project we wanted to add an FAQ (frequently asked questions). Preferred design was to simply list all the questions, and allow the user to click on any question to display the answer. This way the user could quickly scan all the available questions and only get the details for the questions they’re interested in.

The following documents our path to the final solution.

Stage One: Basic Expand/Collapse

There are plenty of resources online to help with this one. Our first version was a combination of this one:

http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/

And this one:

http://api.jquery.com/hover/

This provides the required expand/collapse, with the question behaving like a link to encourage users to click on it.

Paste the following into a content editor webpart (source editor mode) and all is well:

<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $(".answer").hide();
    $(".question").hover (
        function () {
            $(this).css("text-decoration", "underline");
        },
        function () {
            $(this).css("text-decoration", "none");
        }
    );


    $(".question").click(
	function() {
            $(this).next(".answer").slideToggle(500);
    });
});

</script>

<style>
.faq {
  width:600px;
}
.question {
  color : #003399;
  cursor : pointer;  
}
.answer {
  margin-left: 12px;
  padding: 6px;
  background-color: #ddd;
}
</style>

<div class="faq">
<p class="question">Question1</p>
<p class="answer">Answer 1.</p>
<p class="question">Question2</p>
<p class="answer">Answer 2.</p>
<p class="question">Question3</p>
<p class="answer">Answer 3.</p>
<p class="question">Question4</p>
<p class="answer">Answer 4.</p>
</div>

If already managing a site level stylesheet, add these style references to it rather than defining in this one location.

Similarly if already using jQuery elsewhere, consider downloading to your site and referencing the local link. Very handy particularly if not all your users have internet access.

Stage Two: IE6 Flicker

A bonus level for us lucky few still supporting IE6. The toggle function has a crazy flicker event with IE6 when hiding the answer. Over to Stack Overflow for a solution: add overflow:hidden to the element being shown and hidden.

And so the other browsers don’t feel left out, we also added rounded corners to the answer background box:

.answer {
	margin-left: 12px;
	padding: 6px;
	background-color: #ddd;
	overflow:hidden;
	display:none;
	border-radius: 12px;
}

Stage the Third: Add expand/collapse icons

So this gives us expanding and collapsing sections accessed as a series of links. For the next enhancement we wanted to add expand/collapse icons with each link.

First we need to add the default “expand” icon. Quickest method is as background image for the answer style:

.question {
	color : #003399;
	cursor : pointer;
	padding-left : 20px;
	background-image: url('/path/to/expand.png');
	background-repeat: no-repeat;
}

Simply adjust the left padding to provide the necessary space for your image to appear without overwriting your text.

Then to swap the image when expanded, add the CSS code change call to the jQuery click event:

$(".faq .question").click(
	function() {
        	$(this).next(".answer").slideToggle(500);
            	$(this).css("background-image", "url(/path/to/collapse.png)");
    	});

Put it all together and now works beautifully when you click on a section to expand it. But now the problem is the image does not switch back when you collapse it. From that point on the icon remains as “collapse”.

So what this now needs is a way to know the current visibility status for each element as clicked. And the entire point of the slideToggle method is you don’t track the status; it does it for you. Once we start needing to track status time to ditch slideToggle and go to the fundamental show and hide methods.

$(".question").click(
  function() {
    if ($(this).next(".answer").is(":visible")) {
      //currently visible, so hide it
      $(this).next(".answer").hide(500);
      $(this).css("background-image", "url(/path/to/expand.png)");
    } else {
      //currently not visible, so show it	
      $(this).next(".answer").show(500);
      $(this).css("background-image", "url(/path/to/collapse.png)");
    }
  });

So now we have each question expanding/collapsing when clicked, and the intro icon updating accordingly. Perfect.

expandCollapse

As a bonus the show/hide functions do not appear to have the same flicker issue in IE6 as slideToggle() does. No idea why….

Stage the Last: hide other sections when expanding one

As a final step, one possible enhancement is to make the list automatically close an open question when opening another.

However will leave that as an exercise for the reader, because we didn’t get that far..

One thought on “Sharepoint 2007, jQuery and Expand/Collapse Sections

  1. randallsumpter@gmail.com

    This is a good tip particularly to those new to the blogosphere.
    Brief but very precise info… Appreciate your sharing this one.

    A must read post!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>