jQuery Accordion Control Musings

So lately I have been back in the dev arena more so and working from home.  I find that I have some spare time because sometimes I pile directly through lunch.  Today I was playing around with a control that I felt I had tested thoroughly.  I was completely wrong.  So here is an explanation of how to build out the accordion control in a webpart without having the same issues.

First off go here and download the jquery-ui-1.8.16.custom.min.js and jquery-1.6.2.min.js.  Then what I want you to do is create a blank solution file in Visual Studio 2010 and sandbox it.  Now create a module and in this module you want to drop these files into the Style Library or another document library where you can reference the location.  Then you want to drop a scriptlink in using a custom action or create a brand new webpart and drop in the script directives as you would with any javascript files.  I am not going to go over these details if you have worked with jQuery or you read Mark Rackley’s blog you should know how to do basic stuff like so. 

The next piece you want to do is create a Panel to drop in all your javascript code in the webpart like such:

Panel pnlAccordion;

Then in your create child controls instantiante that Panel and create a string right after the instantiation.  Now for the accordion piece I would create a function that passes back a string into this string you just created, then you will do something like this:

pnlAccordion.Add(new LiteralControl(YourAccordionString));

In your function you need to create a string for the Accordion build out that will return back to the CreateChildControls.  At the start of your string you want to put the following piece of code:

YourAccordionBuildOut = @”<script type=’text/javascript’>
$(document).ready(function(){
$(‘#accordion’).accordion({          //this is the name of your div below
navigation:true,
event:’click’,  //the property above and below can be changed
animated: ‘easeslide’   //go to the jquery site look at the properties
});
});
</script>
<div id=’accordion’>”;

Now you have the opening div tag for your accordion control you need to build out the headers and such.  At this point you will create a fantastic function pulling list data, profile data or something other data.  The thing to keep in mind is make sure your header tags are enclosed in the following tags:

<h3>Your Text</h3>

Also, the mistake I made with the next part is dropping a div tag for each element inside each heading.  You can drop a div tag and span tags around each element, however what you want to do is make sure there is a single div around the entire block of elements like such:

<div>
<div>Element1</div>
<div>Element2</div>
</div>

If you do not drop that extra div tag around your elements inside the string, then you will have the issue where it hides the first item in your list of elements and when you click the accordion header it exposes just that one item.  You will spend hours wondering what’s going on trust me.  It’s worth it to just make sure there is a single div around all your elements and be done.

The other thing to keep in mind is that at the end of all your elements build out you need to close the div tag for the accordion control too.  When you are done building out your tags dynamically and you have deployed your webpart and you should see the code above for the script followed by something that looks like this:

<div id=’accordion’>
<h3>Header1</h3>
<div>Elemen1</div>
<div>Element2</div>
<div>Element3</div>
<h3>Header1</h3>
<div>Elemen1</div>
<div>Element2</div>
<div>Element3</div>
<h3>Header1</h3>
<div>Elemen1</div>
<div>Element2</div>
<div>Element3</div>
</div>

If for some reason a div or a header is wrong check the function and the string you created by stepping through and attaching to the user code services process.  Sometimes a rogue tag happens.  Good luck guys and hopefully you will not run into the issues I’ve had.  I hope that you are enjoying the blog posts while they are still coming if I’m lucky I will continue to write one a week for you guys that is semi-technical.

Print | posted on Monday, January 16, 2012 3:38 PM

Feedback

# re: jQuery Accordion Control Musings

Left by Rebecca at 3/26/2012 12:28 PM
Gravatar Is there any possibility of getting the full code for this.

Your comment:





 
 

Copyright © MOSSLover

Design by Bartosz Brzezinski

Design by Phil Haack Based On A Design By Bartosz Brzezinski