Surrounding fields in accordion

  • Resolved David Gewirtz

    (@dgewirtz)


    4 years, 6 months ago

    I’m using the very nice jQuery accordion, which turns anything surrounded by

    '<div id="accordion">'

    into an accordion. So, I’d like to put a few fields into an accordion. How would I take something like this:

           $section_options->add_field(array(
            'name' => 'Test Stripe API Key',
            'id'   => 'dgx_donate_test_stripe_api_key',
            'type' => 'text',
            'desc' => __(
                'This is the Stripe API key associated with your Stripe account used for test transactions.',
                'seamless-donations'),
        ));

        $section_options->add_field(array(
            'name' => 'Test Stripe Secret Key',
            'id'   => 'dgx_donate_test_stripe_secret_key',
            'type' => 'text',
            'desc' => __(
                'This is the Stripe secret key associated with your Stripe account used for test transactions.',
                'seamless-donations'),
        ));

    And turn it into an accordion? I tried to put a ‘before’ element in the first field with the <div id=”accordion”> tag and an ‘after’ element in the second field with the </div> tag, but that failed miserably.

    • This topic was modified 4 years, 6 months ago by David Gewirtz.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    I’m guessing that the markup only applied to seemingly one field instead of all of them?

    I’m curious if this accordion jQuery plugin relies on IDs specifically or if it could be used with classes, since I know `new_cmb2_box() has class parameters available for custom values.

    I’m also wondering if it’d be potentially possible to dynamically add an ID on the right thing, and still have the accordion work, but I can’t say for certain without any sort of link to the plugin there.

    Alternatively, if interested, this may be a fun case for some extended/advanced customization.

    What object type(s) are you adding these to?

    Thread Starter David Gewirtz

    (@dgewirtz)

    I’m creating a new_cmb2_box() and then I’m adding a bunch of fields. I just wanted to surround a few text fields with the accordion. And no, not even one field worked.

    Thread Starter David Gewirtz

    (@dgewirtz)

    Okay, it is workable. You surround the field with some code:

    
'       'before_field'   => '<div id="accordion"><h1>hello</h1>',
        'after_field'   => '</div>',
        'after' => 'This is a note','

    The <h1> names the accordion. The only gotcha is if anything inside the accordion generates as a <p> (and possibly other tags), the jQuery code thinks it’s a new accordion topic. So, don’t use the internal ‘desc’ field and use the ‘after’ field to generate after the accordion.

    • This reply was modified 4 years, 5 months ago by Yui.
    • This reply was modified 4 years, 5 months ago by Yui. Reason: please use CODE button for proper formatting
    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Sounds like you’ve got something working well enough.

    I also didn’t get notified for this thread either so my apologies there.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Surrounding fields in accordion’ is closed to new replies.