> Forums > Active Forums > Themes and Templates > Anyone have a tutorial on Accordion Jquery for the main forum page?
Last Post 20 Jan 2012 10:20 AM by Ben - DotNetNuke. 6 Replies.
AddThis - Bookmarking and Sharing Button Printer Friendly
  •  
  •  
  •  
  •  
  •  
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages
Patrick
Registered Users
Patrick
Post Count:87

--
19 Jan 2012 11:02 AM
    • DotNetNuke Version: 5.6.2
    • Active Forums Version: 4.3.5
    I noticed some jquery tricks for the categories.. I know Jeff Blanks was able to utilize DNN 6 jquery UI to easily create an accordion view on his main forum page..

    Does anyone, or would anyone be willing to give a quick walk through on how to do this? Instead of the little button on the left to expand, contract the forums by group.. would love to have a nice slide-out jquery type function.

    I haven't had much time to look into how AF is structured.. 

    If anyone has a quick method I would greatly appreciate it.

    Thank you so much.

    - Patrick
    Ben - DotNetNuke
    DotNetNuke Staff
    Ben - DotNetNuke
    Post Count:1643

    --
    19 Jan 2012 04:15 PM
    EDIT: removed my response, to do a bit of additional testing.
    Patrick
    Registered Users
    Patrick
    Post Count:87

    --
    19 Jan 2012 04:30 PM
    Hahaha! I was about to try it out! You tricked me Mr. Ben!
    Ben - DotNetNuke
    DotNetNuke Staff
    Ben - DotNetNuke
    Post Count:1643

    --
    19 Jan 2012 04:33 PM
    Sorry, I had just messed up something and then I couldn't get it to work again. But I think my typo was just being cached really heavily by the Client Resource Manager. What I posted before does work. Make a backup of the afutils.min.js file first, just in case.
    Patrick
    Registered Users
    Patrick
    Post Count:87

    --
    20 Jan 2012 09:14 AM
    Fabulous. What I'm going to do is make the entire bar clickable.. not just the little button on the end. I like what Jeff did incorporating the new UI in DNN 6.
    Patrick
    Registered Users
    Patrick
    Post Count:87

    --
    20 Jan 2012 09:42 AM
    Hey Ben.. you forgot to repost it. I have it in my email.. but thought it might be helpful for others.

    Editing my post.. because... duh, I could just post it and save you time considering you're answering a bazillion posts per/day.

    This was actually a lot easier than I expected.

    Open this file: DesktopModules/ActiveForums/scripts/afutils.min.js

    Search for the ToggleGroup function

    Replace both lines

    oGroup.style.display = '';

    and

    oGroup.style.display = 'none';

    each with the following line

    $(oGroup).slideToggle('slow');

    Save the file, ctrl+F5 the page.
    Ben - DotNetNuke
    DotNetNuke Staff
    Ben - DotNetNuke
    Post Count:1643

    --
    20 Jan 2012 10:20 AM
    I didn't forget.

    Also, for anyone who wants to use this, it may require clearing the site & browser cache for the changes to appear. And if the module is upgraded the changes may be reverted to default.
    You are not authorized to post a reply.
    > Forums > Active Forums > Themes and Templates > Anyone have a tutorial on Accordion Jquery for the main forum page?
    test
    Copyright 2012 by DotNetNuke Corporation / Terms of Use / Privacy