none
SharePoint 2010 - Accordian Style Quick Launch Menu

    Question

  • I am working on Sharepoint 2010. i need to display the Quicklaunch in Accordian style.

     

    i am using the following script to achieve it. it works fine but i need to display plus(+) and minus (-) when it expands & collapse.

    <script src="/WebDocuments/jquery-1.4.4.min.js" type="text/ecmascript">
    </script>

    <script type="text/javascript">

    $(document).ready(function() {
    // do stuff when DOM is ready
    makeLNCollapsible();
    });

    function makeLNCollapsible()
    {
    $("ul.root>li.static>a").toggle(
    function () {
    $(">ul", $(this).parent()).show("fast");
    },
    function () {
    $(">ul", $(this).parent()).hide("fast");
    }
    );


    $("li.static>ul.static").css("display","none");
    }
    </script>
    • Moved by Mike Walsh FIN Wednesday, February 23, 2011 1:53 PM SP 2010 q (From:SharePoint - Design and Customization (pre-SharePoint 2010))
    Wednesday, February 23, 2011 12:59 PM

Answers

  • Hi All..

    i finally got everything running fine.

    Here's the script.

    <script src="/WebDocuments/jquery-1.4.4.min.js" type="text/ecmascript">
    </script>

    <script type="text/javascript">

    $(document).ready(function() {
    // do stuff when DOM is ready
    $("#s4-leftpanel-content ul.root>li.static>a").css("margin-left","9px");
    $("#s4-leftpanel-content ul.root>li.static").css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");
    $("#s4-leftpanel-content ul.root>li.static").css("border-bottom","1px Solid #8CB2CE");
    makeLNCollapsible();

    });

    var flg = 0;

    function makeLNCollapsible()
    {



    $("#s4-leftpanel-content ul.root>li.static>a").toggle(

    function () {


    $(">ul", $(this).parent()).show("fast");

    $($(this).parent()).css("background","url('/_layouts/images/Menu1.gif') no-repeat 5px 7px");



    },
    function () {

    $(">ul", $(this).parent()).hide("fast");

    $($(this).parent()).css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");

    }
    );

    $("#s4-leftpanel-content li.static>ul.static").css("display","none");

    }
    </script>

    Hope this helps everyone..who is working to get this right...

     

     

    • Marked as answer by Pooja.Lohkane Monday, February 28, 2011 4:24 AM
    Monday, February 28, 2011 4:24 AM

All replies

  • Hello,

    This is a pre-SharePoint 2010 Design and Customization forum, you may want to move your question to the SharePoint 2010 development forum.

    Thanks!

    Tom


    Tom Molskow - SharePoint Architect - Microsoft Community Contributor 2011 Award - Linked-In - SharePoint Gypsy
    Wednesday, February 23, 2011 1:44 PM
  • I'll  move these when I see them, Tom.  (If it says SP 2010 in the Title I *will* see them!)

    The OP can not move them and so the risk is that he/she posts a parallel thread if asked to move them.

    Pooja: I'm moving this for you. Please delete one of the two threads if you have already asked the same question in a SP 2010 forum.

    Moderatore pre-2010 forums

     


    SP 2010 "FAQ" (mainly useful links): http://wssv4faq.mindsharp.com/default.aspx
    WSS3/MOSS FAQ (FAQ and Links) http://wssv3faq.mindsharp.com/default.aspx
    Both also have links to extensive book lists and to (free) on-line chapters
    Wednesday, February 23, 2011 1:53 PM
  • Hi Mike,

    I am sorry for the inconvenience. i have put up my question on the following forum.

    SharePoint Developer Center > SharePoint 2010 Forums > SharePoint 2010 - General Questions and Answers >

     

    Please confirm me if this is there right place, so that i can delete the question from here.

    Thursday, February 24, 2011 4:08 AM
  • You're close to what you need to add the +/-

    $("ul.root > li.static > a
    
    $("ul.root>li.static>a").toggle(
     function () {
     $(">ul", $(this).parent()).show("fast");
     $(">ul", $(this).parent()).css("background", "url('/_layouts/images/minus.gif') no-repeat left center");
     },
     function () {
     $(">ul", $(this).parent()).hide("fast");
     $(">ul", $(this).parent()).css("background", "url('/_layouts/images/plus.gif') no-repeat left center");
     }
    
    Additionally, on document ready you'll want to set this same property. Optionally you can also add an img tag that's left floated, and updated the img in the same method shown above.
    
    $('selector').append("<img style='background:...; float:left; margin-left:5px;'/>");
    


    SharePoint 2010 Extensions - http://sp2010ext.codeplex.com/ My Blog - http://www.withinsharepoint.com Twitter - http://twitter.com/#!/withnsharepoint
    Thursday, February 24, 2011 5:36 PM
  • Hi Maarten,

    i tried the solution that u suggested, but the image is not displayed properly.

    it displays something like shown below when the quick launch is expanded:

     

    Main Heading

        Sub Heading 1

    +  Sub Heading 2

        Sub Heading 3

     

    Also the image is not displayed when the quick launch is collapsed.

     

     

    Friday, February 25, 2011 8:39 AM
  • I finally got the solution for applying +/- button after playing around with the jquery.

    Thanks Maarten for the help..

    The Final JQuery goes this way:

    <script src="/WebDocuments/jquery-1.4.4.min.js" type="text/ecmascript">
    </script>

    <script type="text/javascript">

    $(document).ready(function() {
    // do stuff when DOM is ready
        $("ul.root>li.static>a").css("margin-left","9px");
       

        $("ul.root>li.static").css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");

     makeLNCollapsible();


    });
     

    function makeLNCollapsible()
    {


    $("ul.root>li.static>a").toggle(

        function () {


        $(">ul", $(this).parent()).show("fast");

        //$(">ul").css("margin-left","12px");

        $($(this).parent()).css("background","url('/_layouts/images/Menu1.gif') no-repeat 5px 7px");
       


        },
        function () {

        $(">ul", $(this).parent()).hide("fast");

       
        $($(this).parent()).css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");
         
        }
    );

     
    $("li.static>ul.static").css("display","none");


    }


    </script>

     

    but i am still struggling as the css(Using the above jquery) is also applied to the top link bar due to which the top link bar also toggles. once i find the solution for the same i will update u all.

    • Proposed as answer by Beeshow Tuesday, February 07, 2012 8:26 AM
    • Unproposed as answer by Beeshow Tuesday, February 07, 2012 8:26 AM
    • Proposed as answer by Beeshow Tuesday, February 07, 2012 8:26 AM
    Friday, February 25, 2011 1:54 PM
  • If you get the id/class of the top link bar you can then update the selectors to only apply to the sub entries.
    SharePoint 2010 Extensions - http://sp2010ext.codeplex.com/ My Blog - http://www.withinsharepoint.com Twitter - http://twitter.com/#!/withnsharepoint
    Saturday, February 26, 2011 3:34 AM
  • Hi All..

    i finally got everything running fine.

    Here's the script.

    <script src="/WebDocuments/jquery-1.4.4.min.js" type="text/ecmascript">
    </script>

    <script type="text/javascript">

    $(document).ready(function() {
    // do stuff when DOM is ready
    $("#s4-leftpanel-content ul.root>li.static>a").css("margin-left","9px");
    $("#s4-leftpanel-content ul.root>li.static").css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");
    $("#s4-leftpanel-content ul.root>li.static").css("border-bottom","1px Solid #8CB2CE");
    makeLNCollapsible();

    });

    var flg = 0;

    function makeLNCollapsible()
    {



    $("#s4-leftpanel-content ul.root>li.static>a").toggle(

    function () {


    $(">ul", $(this).parent()).show("fast");

    $($(this).parent()).css("background","url('/_layouts/images/Menu1.gif') no-repeat 5px 7px");



    },
    function () {

    $(">ul", $(this).parent()).hide("fast");

    $($(this).parent()).css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");

    }
    );

    $("#s4-leftpanel-content li.static>ul.static").css("display","none");

    }
    </script>

    Hope this helps everyone..who is working to get this right...

     

     

    • Marked as answer by Pooja.Lohkane Monday, February 28, 2011 4:24 AM
    Monday, February 28, 2011 4:24 AM
  • Absolutly super awesome!  Thanks
    Wednesday, April 06, 2011 7:56 PM
  • I was looking for the same and your solution saved me lot of time.

     

    10 points for you!!!!

     

    thanks

    Thursday, April 14, 2011 1:35 PM
  • Hi, It's not working for me..I've included the js in my master page and nothing happens..no error.. Any idea ?
    Monday, June 27, 2011 6:29 AM
  • This works and it keeps the Heading linkable and the submenu open when you click the submenu items.

    <script type="text/javascript">
    $
    (document).ready(function() {
    // do stuff when DOM is ready

    makeLNCollapsible
    ();
    });
    function makeLNCollapsible()
    {
    $
    ("div.menu-vertical>ul.root>li.static>a").toggle(
    function () {
    var menuitem = $(this);
    $
    (">ul", $(this).parent()).show("fast", function() { window.location = menuitem.attr('href');});
    },
    function () {
    $
    (">ul", $(this).parent()).hide("fast");
         
    }
    );

    $
    ("li.static>ul.static").css("display","none");
    $selectedEntry
    = $('li.static>ul.static .selected');
    if($selectedEntry.length>0) {
        $selectedEntry
    .parent().css("display", "block");

    }
    $selectedEntry
    = $('li.static.selected');
    if($selectedEntry.length > 0) {
        $selectedEntry
    .children('ul.static').css("display", "block");


    }
     
    }
     
    </script>
    Monday, August 08, 2011 7:53 AM
  • Hey, thanks for the great scripts!

    Though I encountered a few problems: With the script of losersteelman, when a Heading has no submenu items, it is not linkable anymore.

    The other thing is, that if I insert the icons for expanded/collapsed and click on a linkable Heading it doesn't work properly, the icon changes back to the collapsed icon although it is expanded.

    Any ideas to solve this?

    I'm pretty new to SharePoint scripting and jQuery, so any help would be appreciated!


    Monday, August 15, 2011 8:33 AM
  • I'm new at this and at a loss to get this work correctly.  I'm assuming that you copy and paste the code into v4master...the question is where in the code?  I'm assuming that location matters.  Also, I'm assuming that you are pointing to a top level directory on your C: drive that contains the version of jquery...is that correct?

    No rush at all...thanks ahead of time.

     

     

    Paul

     

    Monday, September 26, 2011 11:58 PM
  • Hey Good one Pooja

    10 Points !!!!

    • Proposed as answer by Kalyan Neni Friday, March 16, 2012 9:22 AM
    • Unproposed as answer by Kalyan Neni Friday, March 16, 2012 9:27 AM
    • Edited by Kalyan Neni Friday, March 16, 2012 11:08 AM
    Friday, March 16, 2012 9:21 AM
  • Hi,

    I have tried to implement the solution provided here. But it doesnot work and i get a javascript error. i have placed the file and referred correctly. Am i missing something?

    Thanks in advance!

    Monday, July 16, 2012 2:00 PM