DNN Theming Tips and Tricks

Rewind: The Announcements Module and jQuery as an Accordion

By Ralph Williams, Jr. on 8/8/2012

rewind-accordionA while back I posted how to set up The Announcements Module and jQuery as an Accordion. I decided to revisit this and update it for DNN 6. This method makes use of the built in DotNetNuke 6 styles so that your site will be consistent throughout. I’ve also documented how to Turn DNN Announcements Module into a jQuery Slider.

Resources Needed

This version will make use of a new skin object, DotNetNuke SkinObjectsEx that was not available at the time. This skin object will allow us to make use of the DNN’s jQuery and will still work with the new Client Resource Management API. This does require some small skin changes, but they should be pretty easy.

  • DotNetNuke SkinObjectsEx SkinObject (Download and install to DNN)

The Demo

Note: I have styled my skin so the demo will reflect some of my own styles that are consistent throughout the site.

The HTML

Add template to Announcements Module in Announcements Tab:

  1. Header
    <div id="accordion" class="dnnForm">
  2. Item
    <h2 class="dnnFormSectionHead"><a href="#">[TITLE]</a></h2>
                <div>[EDIT][IMAGESOURCE][DESCRIPTION]</div>
  3. Footer
    </div>

The CSS

None. DotNetNuke handles this for you when you used the class dnnForm to your HTML template in your module settings.

The jQuery

Add the following jQuery to call the Accordion function and apply it to your Announcements.

  1. Place this in the Footer section of the Announcements module settings below your HTML with the closing div
  2. Register SkinObjectsEx skin object and use it to add the jQuery and jQueryUI based on your site’s settings to skin file (skinname.ascx).
    <%@ Register TagPrefix="dnn" TagName="SCRIPT" Src="~/DesktopModules/SkinObjectsEx/Script.ascx" %>
    
                
                

    Note: the Announcements Accordion may work while logged in as Admin/Host without adding this because DNN loads jQuery and jQueryUI for admin controls; however, it will (more than likely) stop working once you are logged out.

Finally, add some entries to your Announcements and there you have your DNN styled Accordion Announcements Module! Enjoy!