GetListItems & Accordions

Jan 16, 2013 at 10:32 AM

Morning all,

I'm looking at presenting some information from an Announcements list / Custom list within an Accordion and have distilled two ways of doing so: -

  1. Create a Web Part that a list can plug into
  2. Grab the list data and modify its presentation

In looking at Option 2, I've been looking at the GetListItems function.  I'm only getting started on my SP Development journey, so I'm wondering how feasible would it be to wrap up the output of my list via GetListItems into some Accordion code?

Many thanks,
Steven

Coordinator
Jan 16, 2013 at 1:44 PM

Steven:

I have several posts on my blog showing how to do this. I usually use a DVWP to put the data into the page and then call jQueryUI's .accordion() function. You could also do it entirely with script using GetListItems if you prefer.

M.

Jan 16, 2013 at 2:05 PM
Edited Jan 16, 2013 at 2:05 PM

Conveniently, Marc has already blogged about this:

http://sympmarc.com/2011/11/02/creating-a-jquery-accordion-with-a-data-view-web-part/

He's using a DVWP here, but reading through the code, you'll be doing something very similar to his process.  The code identifies the "Headings" and emits the correct HTML.  The correct HTML structure can be found in the docs on jQueryUI site.  Whatever you want within the "Heading" is totally up to you.  I set up a test site for you to mess around with that should help you along the way:

http://codepen.io/iOnline247/pen/atBuG

Cheers,
Matthew 

Jan 16, 2013 at 2:07 PM

And till that point, I had considered I'd looked through all blog posts.

Many thanks gents, I'll get stuck in.

Apr 15, 2013 at 5:38 PM
Edited Apr 15, 2013 at 5:48 PM
I have just used a Content Editor Web Part. It looks up to a custom list named FAQ. It seems to be a little flicker, adding the <DOCTYPE> attribute seems to mitigate it a little. The accordion seems to invoking the callback function twice when you collapse a section. This is using your option 2.

http://therelentlessfrontend.com/2011/07/25/solve-flickering-jquery-accordion-issue-in-moss-2007/


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<%@ Page Language="C#" %> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 

    <title></title>

        <!--StyleSheets-->
        <link rel="stylesheet" type="text/css" href="../Code/Scripts/jQuery-UI/css/dark-hive/jquery-ui-1.10.2.min.css"/>
        
        <!--Scripts-->
        <script type="text/javascript"  src="../Code/Scripts/jQuery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript"  src="../Code/Scripts/jQuery-UI/js/jquery-ui-1.10.2.js"></script>        
        <script type="text/javascript"  src="../Code/Scripts/SPServices/jquery.SPServices-0.7.2.js"></script>
    
        <script type="text/javascript">

            $(document).ready(function() { 
                ExecuteCAML();
            });
            
            function ExecuteCAML(){
                        
                var viewFields = "<ViewFields xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
                  "<FieldRef Name='LinkTitle'/><FieldRef Name='Answer' /></ViewFields>";
                
                var query = "<Query xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
                            "</Query>";
                
                tempFieldsArray = viewFields.split("Name='");
                fieldArray = new Array();
                
                for (x = 1; x < tempFieldsArray.length; x++)
                {
                    fieldArray.push(tempFieldsArray[x].substring(0,tempFieldsArray[x].indexOf("'")));
                }       
                
                $().SPServices({
                        operation: "GetListItems",
                        async: true,                        
                        listName: "FAQ",
                        CAMLViewFields: viewFields,
                        CAMLQuery: query,
                        completefunc: function (xData, Status) { 
                            
                            $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                                for (fields in fieldArray){
                                    var h4 = "<h4 style=\"font-weight: bold;\">" + $(this).attr("ows_" + fieldArray[fields]) + "</h4>";
                                    var div = $(this).attr("ows_" + fieldArray[fields]);
                                    var content = $(h4 + div);
                                    content.appendTo("#accordion"); 
                                }
                            });
                            $( "#accordion" ).accordion({collapsible: true, heightStyle: "fill",icons: null, active: false});   
                        }           
                });
            }
            
            function getCurrentSite() {
                var thisSite = $().SPServices.SPGetCurrentSite();
                var thisList = $().SPServices.SPListNameFromUrl();
                window.location.href = "../Lists/FAQ/NewForm.aspx"
            }
        </script>
        <style type="text/css">
        .header-custom {
            border-bottom: 1px solid #6f9dd9; 
            background-color: #afd2ff; 
            background-image: url("/_layouts/images/listheadergrad.gif"); 
            background-repeat: repeat-x;    
        }
        .header-custom {
            text-align: left; 
            font-family: verdana; 
            font-size:x-small;
            border-top: 0px solid #d8d8d8; 
            vertical-align:middle;
            padding: 0px;
        }
        .label-custom{
            cursor: default; 
            text-align: left; 
            font-family: verdana; 
            font-size: 8pt; 
            height: 19px;
            color:#000066
        }
        .body-custom {
            text-align: left; 
            font-family: verdana; 
            font-size:xx-small;
            border-top: 0px solid #d8d8d8; 
            color: #525252; 

        }
        </style>
    </head>

    <body style="margin: 0px">
        <div class="body-custom" id="accordion"></div>
                <table width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="label-custom" style="text-align:left;padding-right:20px; width: 129px; height: 26px;"><br/>
                        &nbsp;&nbsp;<img alt="" src="/_layouts/images/rect.gif"/>&nbsp;&nbsp;<a href="#" onclick="getCurrentSite()" >Add New Question</a>
                    </td>
                    <td class="label-custom" style="display:none;text-align:left;padding-right:20px; height: 26px;"><br/>
                        &nbsp;&nbsp;<img alt="" src="/_layouts/images/rect.gif"/>&nbsp;&nbsp;<a href="#" >Change List</a>
                    </td>
                </tr>
                <tr><td>&nbsp;</td></tr>
        </table>
    </body>
</html>