Open/close accordion

Question

I am trying to fix the function of this accordion so that I can open and close on click. I am using a wordpress theme that has an accordion module built in. I have been told to add slideToggle(), but I am not sure where it belongs. Here is the link to the site where the accordion can be seen: http://www.desertpeak.biz/customer-service/ .

I believe it should be added somewhere in here?

<?php

add_action('dslc_hook_register_modules',
     create_function('', 'return dslc_register_module( "Slowave_Accordion" );')
);

class Slowave_Accordion extends DSLC_Module {

    var $module_id = 'Slowave_Accordion';
    var $module_title = 'Slowave Accordion';
    var $module_icon = 'reorder';
    var $module_category = 'Slowave - Tabs';

    function output( $options ) {

        global $dslc_active;

        if ( $dslc_active && is_user_logged_in() && current_user_can( DS_LIVE_COMPOSER_CAPABILITY ) )
            $dslc_is_admin = true;
        else
            $dslc_is_admin = false;     

        $this->module_start( $options );

        /* Module output stars here */ 

            $accordion_nav = explode( '(dslc_sep)', trim( $options['accordion_nav'] ) );

            if ( empty( $options['accordion_content'] ) )
                $accordion_contents = false;
            else
                $accordion_contents = explode( '(dslc_sep)', trim( $options['accordion_content'] ) );

            $count = 0;

        ?>  <div class="divide10"></div>
                <div class="dslc-accordion">

                    <?php if ( is_array( $accordion_contents ) && count( $accordion_contents ) > 0 ) : ?>

                        <?php foreach ( $accordion_contents as $accordion_content ) : ?>

                            <div class="dslc-accordion-item">

                                <div class="dslc-accordion-header dslc-accordion-hook">
                                    <span class="dslc-accordion-title" <?php if ( $dslc_is_admin ) echo 'contenteditable'; ?>><?php echo $accordion_nav[$count]; ?></span>
                                    <?php if ( $dslc_is_admin ) : ?>
                                        <span class="dslca-delete-accordion-hook"><span class="dslca-icon dslc-icon-remove"></span></span>
                                    <?php endif; ?>
                                </div>

                                <div class="dslc-accordion-content" <?php if ( $dslc_is_admin ) echo 'contenteditable'; ?>>
                                    <?php echo stripslashes( $accordion_content ); ?>
                                </div><!-- .dslc-accordion-content -->

                            </div><!-- .dslc-accordion-item -->

                        <?php $count++; endforeach; ?>

                    <?php else : ?>

                        <div class="dslc-accordion-item">

                            <div class="dslc-accordion-header dslc-accordion-hook">
                                <span class="dslc-accordion-title" <?php if ( $dslc_is_admin ) echo 'contenteditable'; ?>>CLICK TO EDIT</span>
                                <?php if ( $dslc_is_admin ) : ?>
                                    <span class="dslca-delete-accordion-hook"><span class="dslca-icon dslc-icon-remove"></span></span>
                                <?php endif; ?>
                            </div>

                            <div class="dslc-accordion-content" <?php if ( $dslc_is_admin ) echo 'contenteditable'; ?>>
                                Placeholder content, click to edit. Lorem ipsum dolor sit amet, consectetur
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </div><!-- .dslc-accordion-content -->

                        </div><!-- .dslc-accordion-item -->

                    <?php endif; ?>

                    <?php if ( $dslc_is_admin ) : ?>
                        <div class="dslca-add-accordion">
                            <span class="dslca-add-accordion-hook"><span class="dslca-icon dslc-icon-plus"></span></span>
                        </div>
                    <?php endif; ?>

                </div><!-- .dslc-accordion -->

        <?php /* Module output ends here */

        $this->module_end( $options );

    }

}

Answer 1

In this file, http://www.desertpeak.biz/wp-content/plugins/ds-live-composer/js/front.js?ver=3.9.2

In line 792 replace with the following (or add a javascript file and make sure it loads at the end)

jQuery(document).off( 'click', '.dslc-accordion-hook');
jQuery(document).on( 'click', '.dslc-accordion-hook', function(){

    var dslcActive = jQuery(this).closest('.dslc-accordion-item'),
    dslcInactive = dslcActive.siblings('.dslc-accordion-item');

    if (dslcActive.hasClass( 'dslc-active' ) ){
        dslcActive.removeClass('dslc-active').addClass('dslc-inactive');
        dslcInactive.removeClass('dslc-active').addClass('dslc-inactive');
        jQuery('.dslc-accordion-content', dslcActive).slideUp(300);
        return false;
    }
    dslcActive.removeClass('dslc-inactive').addClass('dslc-active');
    dslcInactive.removeClass('dslc-active').addClass('dslc-inactive');

    jQuery('.dslc-accordion-content', dslcActive).slideDown(300);
    jQuery('.dslc-accordion-content', dslcInactive).slideUp(300);

});

Answer 2

This should work:

$(document).on( 'click', '.dslc-accordion-hook', function(){

        var dslcActive = $(this).closest('.dslc-accordion-item'),
        dslcInactive = dslcActive.siblings('.dslc-accordion-item');


      //add this line:
       if(dslcActive.hasClass('dslc-active')) 
              {   
              dslcActive.find('.dslc-accordion-content').hide(); 
              dslcActive.removeClass('dslc-active').addClass('dslc-inactive');
              $('.dslc-accordion-content', dslcActive).slideUp(300);
              }
        else  {
              dslcActive.find('.dslc-accordion-content').show(); 
              }

        //above this line:
        dslcActive.removeClass('dslc-inactive').addClass('dslc-active');
        dslcInactive.removeClass('dslc-active').addClass('dslc-inactive');

        $('.dslc-accordion-content', dslcActive).slideDown(300);
        $('.dslc-accordion-content', dslcInactive).slideUp(300);

    });