I have a custom Instantiation form with a lot of CheckBoxes in SP2010. Now I've to put the CheckBoxes into different categories which should be collapsible, like you can see in the picture below.
Collapsible control

Is there any asp.net control which let me do this easily for SharePoint? I read that the ajax CollapsiblePanelExtender doesn't work fine with SharePoint so I guess that I shouldn't use that control.

It'd be perfect if there's a control which expand/collapse when the user clicks on the title ("Sharepoint" in this example).

I tried to work with JQuery but I didn't get it to work. It'd be nice if someone could take a look at it and tell me what I'm doing wrong.
Here's my code:

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <asp:Panel ID="pHeader" runat="server"><asp:Label text="Test..." runat="server" /></asp:Panel>
    <asp:Panel ID="tBody" runat="server">
        <asp:PlaceHolder ID="plhPermission" runat="server" /> <!-- My CheckBoxes go here dynamically -->

And for the JQuery part:

<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderAdditionalPageHead">

    <script type="text/javascript" src="/_layouts/PermissionWorkflow/JQuery.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#pHeader').click(function () {


When I deploy it it only shows me the label text but nothing happen when I click on it.
Does anyone see what I'm doing wrong here?

3 Answers 3


Yes Ajax CollapsiblePanelExtender is fine to use! iv used it enough times! The people who complain are the ones who dont know how to use it!

You can do it through either c# or aspx. But you need to have two Divs, one is the header that the user would click (title) and the other is the body that contains the checkboxes.

add your label within the header control, add the checkboxes and anything else within the body control.

now the next part is to link the header with the body and the actions they perform using the id's.

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server"
    CollapsedText="Show Details..."
    ExpandedText="Hide Details" 
    ExpandDirection="Vertical" />


target control id is the id of the body panel(div), the expand and collapse id is of the header panel (div).

each header requires a unique <ajaxToolkit:CollapsiblePanelExtender ID! if doing it through c# this could be done through a loop incrementing by 1, same with the header and body panel so they link up ;)

dont forget to add add controls within an update panel!

  • Thanks for the answer. Do I have to download a special .dll to use this control? I've never worked with it before.
    – Pascal_AC
    Mar 25, 2014 at 12:28
  • no you just need the ajaxcontroltoolkit.dll, if the page is created in visual studios than you can use the designer to drag drop the ajax CollapsiblePanelExtender. Otherwise if in c# codebehind add the reference to the dll. The dll was designed for sharepoint and works perfectly in 2010! jondack.com/index.php/2010/10/28/…
    – Ali Jafer
    Mar 25, 2014 at 13:08
  • okay thank you, I'll try if it works for me. Where do I've to write the <ajaxToolkit:CallapsiblePanelExtender? Just somewhere in the <asp:Content ContentPlaceHolderID="PlaceHolderMain"?
    – Pascal_AC
    Mar 25, 2014 at 13:19
  • yes it would be within the main placeholder!
    – Ali Jafer
    Mar 25, 2014 at 13:44
  • no probs happy to help! this should be the correct way :)
    – Ali Jafer
    Mar 28, 2014 at 10:42

Instead of using CollapsiblePanelExtender of AJAX, use jQuery as in case of AJAX we need to change web.config and other tweaks. You can use default CollapsablePanel control of Jquery or other plugins available.

  • Thanks for your answer! But I don't get it to work with JQuery :( I updated my question with what I've tried, so it'd be nice if you could take a look at it again. Maybe you'll see what I'm doing wrong.
    – Pascal_AC
    Mar 25, 2014 at 10:39

I had a problem like that and I solved with a couple of CSS class and lines of JQuery. For example:

<ul class="archive_year">
<li class="years">2012
<ul class="archive_month">
    <li class="months">September
        <ul class="archive_posts">
            <li class="posts">Article 1</li>
            <li class="posts">Article 2</li>
            <li class="posts">Article 3</li>
            <li class="posts">Article 4</li>
    <li class="months">August
        <ul class="archive_posts">
            <li class="posts">Article 1</li>

<li class="years">2011</li>
    <ul class="archive_month">
        <li class="months">July
            <ul class="archive_posts">
                <li class="posts">Article 1</li>

$('.archive_month ul').hide();
$('.months').click(function() {

Here for a live example: http://jsfiddle.net/VNkM2/2/

Also you can improve that using jquery.UI or your CSS

  • Thanks for your answer! But I don't get it to work :/ I updated my question with what I've tried, could you take a look at it? Maybe you see what I'm doing wrong.
    – Pascal_AC
    Mar 25, 2014 at 10:38
  • have u took a look at the live example? Mar 25, 2014 at 10:48
  • Yes and then I tried to use it in my .aspx file but I don't get it to work there. I don't work with asp.net files that much so I'm not sure if I use it correctly there.
    – Pascal_AC
    Mar 25, 2014 at 10:56
  • Have you check your dom? What I expect is that your ID name changed Mar 25, 2014 at 11:05
  • You were right the ID of both controls was changed :/ But even when I try to use the JQuery part with class names instead of IDs it doesn't work.
    – Pascal_AC
    Mar 25, 2014 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.