How to Open or Close Each Individual Accordion

rss

Posted by Jdubs - Jun 4 ’15 at 05:08

I'm using the following link: http://forum.spform.com/forms-designer-for-sharepoint-20/expand-accordion-25187/

 

But I'm having a hard time A) making all Accordions collapsed by default, and B) making the next according open based on field change.

 

What I want to happen is the next accordian to open with the last field on the previous accordion has been filled out.

I can make it work for the first accordion, but I don't know how to "identify" the next accordion section via Javascript.

 

Here's my current code:

fd.field('Product').change(function() {

 

$('#fd_accordion-0 > h3:eq(0)').click()

});

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 5 months 5 days
    #1 by Dmitry Kozlov Jun 5 ’15 at 07:52

    Hi,

    Just change the highlighted index in h3:eq function:

    fd.field('Product').change(function() {
        $('#fd_accordion-0 > h3:eq(0)').click()
    });
    
  • Jdubs
    Member
    Member for: 5 years 2 months 7 days
    #2 by Jdubs Jun 5 ’15 at 08:21

    [#1]: I think there may be something wrong with my setup.

    Changing index number for the h3:eq function does not work for me.

     

    However, if I click and drag a different Accordion onto the page, then changing the index does work for me.  However, the index changes the control of the original Accordian, and the new Accordian I drag to the page has no functionality.

    Anyway, I'm going to move on from this, as it seems too glitchy.  Just wanted to give you the additional info.

  • Jdubs
    Member
    Member for: 5 years 2 months 7 days
    #3 by Jdubs Jun 8 ’15 at 01:38

    [#1]: To be clear, the only way to expand the Accordions is via the "click()" method, correct?

    So there's no way to expand (only) for certain conditions, and contract (only) for certain conditions, right?

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 5 months 5 days
    #4 by Dmitry Kozlov Jun 9 ’15 at 05:08

    [#3]: Hi,

    If you use the accordion in 'Single' or 'SingleCollapsable' modes, you can try the following code to activate a particular section:

    $('#fd_accordion-0').accordion( "option", "active",  1);
Displaying 1 to 4 of 4 messages