I am in need of fixing this code so that the accordion can open AND close on click. I am using a wordpress theme that includes an accordion module and am trying to manipulate the code to work for my needs.
Here is the accordion.js
( function( $ ){
$( document ).ready( function () {
// Expand/Collapse on click
$( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
return;
e.preventDefault(); // Keep this AFTER the key filter above
accordionSwitch( $( this ) );
});
// Re-initialize accordion when screen options are toggled
$( '.hide-postbox-tog' ).click( function () {
accordionInit();
});
});
var accordionOptions = $( '.accordion-container li.accordion-section' ),
sectionContent = $( '.accordion-section-content' );
function accordionInit () {
// Rounded corners
accordionOptions.removeClass( 'top bottom' );
accordionOptions.filter( ':visible' ).first().addClass( 'top' );
accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
}
function accordionSwitch ( el ) {
var section = el.closest( '.accordion-section' ),
siblings = section.closest( '.accordion-container' ).find( '.open' ),
content = section.find( sectionContent );
if ( section.hasClass( 'cannot-expand' ) )
return;
if ( section.hasClass( 'open' ) ) {
section.toggleClass( 'open' );
content.toggle( true ).slideToggle( 150 );
} else {
siblings.removeClass( 'open' );
siblings.find( sectionContent ).show().slideUp( 150 );
content.toggle( false ).slideToggle( 150 );
section.toggleClass( 'open' );
}
accordionInit();
}
// Initialize the accordion (currently just corner fixes)
accordionInit();
})(jQuery);
and this is the module.php that I believe is connected to it:
<?php
class DSLC_Accordion extends DSLC_Module {
var $module_id;
var $module_title;
var $module_icon;
var $module_category;
function __construct() {
$this->module_id = 'DSLC_Accordion';
$this->module_title = __( 'Accordion', 'dslc_string' );
$this->module_icon = 'reorder';
$this->module_category = 'elements';
}
function options() {
$dslc_options = array(
array(
'label' => __( '(hidden) Accordion Content', 'dslc_string' ),
'id' => 'accordion_content',
'std' => '',
'type' => 'textarea',
'visibility' => 'hidden',
'section' => 'styling',
),
array(
'label' => __( '(hidden) Accordion Nav', 'dslc_string' ),
'id' => 'accordion_nav',
'std' => '',
'type' => 'textarea',
'visibility' => 'hidden',
'section' => 'styling',
),
array(
'label' => __( 'Open by default', 'dslc_string' ),
'id' => 'open_by_default',
'std' => '1',
'type' => 'text',
),
/**
* General
*/
array(
'label' => __( 'BG Color', 'dslc_string' ),
'id' => 'css_bg_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion',
'affect_on_change_rule' => 'background-color',
'section' => 'styling',
),
array(
'label' => __( 'Border Color', 'dslc_string' ),
'id' => 'css_border_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion',
'affect_on_change_rule' => 'border-color',
'section' => 'styling',
),
array(
'label' => __( 'Border Width', 'dslc_string' ),
'id' => 'css_border_width',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion',
'affect_on_change_rule' => 'border-width',
'section' => 'styling',
'ext' => 'px',
),
array(
'label' => __( 'Borders', 'dslc_string' ),
'id' => 'css_border_trbl',
'std' => 'top right bottom left',
'type' => 'checkbox',
'choices' => array(
array(
'label' => __( 'Top', 'dslc_string' ),
'value' => 'top'
),
array(
'label' => __( 'Right', 'dslc_string' ),
'value' => 'right'
),
array(
'label' => __( 'Bottom', 'dslc_string' ),
'value' => 'bottom'
),
array(
'label' => __( 'Left', 'dslc_string' ),
'value' => 'left'
),
),
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion',
'affect_on_change_rule' => 'border-style',
'section' => 'styling',
),
array(
'label' => __( 'Margin Bottom', 'dslc_string' ),
'id' => 'css_margin_bottom',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion',
'affect_on_change_rule' => 'margin-bottom',
'section' => 'styling',
'ext' => 'px',
),
array(
'label' => __( 'Padding Vertical', 'dslc_string' ),
'id' => 'css_padding_vertical',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion',
'affect_on_change_rule' => 'padding-top,padding-bottom',
'section' => 'styling',
'ext' => 'px',
),
array(
'label' => __( 'Padding Horizontal', 'dslc_string' ),
'id' => 'css_padding_horizontal',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion',
'affect_on_change_rule' => 'padding-left,padding-right',
'section' => 'styling',
'ext' => 'px',
),
/**
* Header
*/
array(
'label' => __( 'BG Color', 'dslc_string' ),
'id' => 'css_header_bg_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-header',
'affect_on_change_rule' => 'background-color',
'section' => 'styling',
'tab' => __( 'header', 'dslc_string' )
),
array(
'label' => __( 'Border Color', 'dslc_string' ),
'id' => 'css_header_border_color',
'std' => '#e8e8e8',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-header',
'affect_on_change_rule' => 'border-color',
'section' => 'styling',
'tab' => __( 'header', 'dslc_string' )
),
array(
'label' => __( 'Border Width', 'dslc_string' ),
'id' => 'css_header_border_width',
'std' => '1',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-header',
'affect_on_change_rule' => 'border-width',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'header', 'dslc_string' )
),
array(
'label' => __( 'Borders', 'dslc_string' ),
'id' => 'css_header_border_trbl',
'std' => 'top right bottom left',
'type' => 'checkbox',
'choices' => array(
array(
'label' => __( 'Top', 'dslc_string' ),
'value' => 'top'
),
array(
'label' => __( 'Right', 'dslc_string' ),
'value' => 'right'
),
array(
'label' => __( 'Bottom', 'dslc_string' ),
'value' => 'bottom'
),
array(
'label' => __( 'Left', 'dslc_string' ),
'value' => 'left'
),
),
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-header',
'affect_on_change_rule' => 'border-style',
'section' => 'styling',
'tab' => __( 'header', 'dslc_string' )
),
array(
'label' => __( 'Margin Bottom', 'dslc_string' ),
'id' => 'css_header_margin_bottom',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-header',
'affect_on_change_rule' => 'margin-bottom',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'header', 'dslc_string' )
),
array(
'label' => __( 'Padding Vertical', 'dslc_string' ),
'id' => 'css_header_padding_vertical',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-header',
'affect_on_change_rule' => 'padding-top,padding-bottom',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'header', 'dslc_string' )
),
array(
'label' => __( 'Padding Horizontal', 'dslc_string' ),
'id' => 'css_header_padding_horizontal',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-header',
'affect_on_change_rule' => 'padding-left,padding-right',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'header', 'dslc_string' )
),
/**
* Title
*/
array(
'label' => __( 'BG Color', 'dslc_string' ),
'id' => 'css_title_bg_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'background-color',
'section' => 'styling',
'tab' => __( 'title', 'dslc_string' )
),
array(
'label' => __( 'Border Color', 'dslc_string' ),
'id' => 'css_title_border_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'border-color',
'section' => 'styling',
'tab' => __( 'title', 'dslc_string' )
),
array(
'label' => __( 'Border Width', 'dslc_string' ),
'id' => 'css_title_border_width',
'std' => '0',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'border-width',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'title', 'dslc_string' )
),
array(
'label' => __( 'Borders', 'dslc_string' ),
'id' => 'css_title_border_trbl',
'std' => 'top right bottom left',
'type' => 'checkbox',
'choices' => array(
array(
'label' => __( 'Top', 'dslc_string' ),
'value' => 'top'
),
array(
'label' => __( 'Right', 'dslc_string' ),
'value' => 'right'
),
array(
'label' => __( 'Bottom', 'dslc_string' ),
'value' => 'bottom'
),
array(
'label' => __( 'Left', 'dslc_string' ),
'value' => 'left'
),
),
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'border-style',
'section' => 'styling',
'tab' => __( 'title', 'dslc_string' )
),
array(
'label' => __( 'Color', 'dslc_string' ),
'id' => 'css_title_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'color',
'section' => 'styling',
'tab' => __( 'title', 'dslc_string' )
),
array(
'label' => __( 'Font Size', 'dslc_string' ),
'id' => 'css_title_font_size',
'std' => '12',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'font-size',
'section' => 'styling',
'tab' => __( 'title', 'dslc_string' ),
'ext' => 'px'
),
array(
'label' => __( 'Font Weight', 'dslc_string' ),
'id' => 'css_title_font_weight',
'std' => '700',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'font-weight',
'section' => 'styling',
'tab' => __( 'title', 'dslc_string' ),
'ext' => '',
'min' => 100,
'max' => 900,
'increment' => 100
),
array(
'label' => __( 'Font Family', 'dslc_string' ),
'id' => 'css_title_font_family',
'std' => 'Open Sans',
'type' => 'font',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'font-family',
'section' => 'styling',
'tab' => __( 'title', 'dslc_string' ),
),
array(
'label' => __( 'Padding Vertical', 'dslc_string' ),
'id' => 'css_title_padding_vertical',
'std' => '15',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'padding-top,padding-bottom',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'title', 'dslc_string' )
),
array(
'label' => __( 'Padding Horizontal', 'dslc_string' ),
'id' => 'css_title_padding_horizontal',
'std' => '15',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-title',
'affect_on_change_rule' => 'padding-left,padding-right',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'title', 'dslc_string' )
),
/**
* Content
*/
array(
'label' => __( 'BG Color', 'dslc_string' ),
'id' => 'css_content_bg_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'background-color',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' )
),
array(
'label' => __( 'Border Color', 'dslc_string' ),
'id' => 'css_content_border_color',
'std' => '#e8e8e8',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'border-color',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' )
),
array(
'label' => __( 'Border Width', 'dslc_string' ),
'id' => 'css_content_border_width',
'std' => '1',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'border-width',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'content', 'dslc_string' )
),
array(
'label' => __( 'Borders', 'dslc_string' ),
'id' => 'css_content_border_trbl',
'std' => 'right bottom left',
'type' => 'checkbox',
'choices' => array(
array(
'label' => __( 'Top', 'dslc_string' ),
'value' => 'top'
),
array(
'label' => __( 'Right', 'dslc_string' ),
'value' => 'right'
),
array(
'label' => __( 'Bottom', 'dslc_string' ),
'value' => 'bottom'
),
array(
'label' => __( 'Left', 'dslc_string' ),
'value' => 'left'
),
),
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'border-style',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' )
),
array(
'label' => __( 'Color', 'dslc_string' ),
'id' => 'css_content_color',
'std' => '',
'type' => 'color',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'color',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' )
),
array(
'label' => __( 'Font Size', 'dslc_string' ),
'id' => 'css_content_font_size',
'std' => '12',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'font-size',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' ),
'ext' => 'px'
),
array(
'label' => __( 'Font Weight', 'dslc_string' ),
'id' => 'css_content_font_weight',
'std' => '400',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'font-weight',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' ),
'ext' => '',
'min' => 100,
'max' => 900,
'increment' => 100
),
array(
'label' => __( 'Font Family', 'dslc_string' ),
'id' => 'css_content_font_family',
'std' => 'Open Sans',
'type' => 'font',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'font-family',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' ),
),
array(
'label' => __( 'Line Height', 'dslc_string' ),
'id' => 'css_content_line_height',
'std' => '22',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'line-height',
'section' => 'styling',
'tab' => __( 'content', 'dslc_string' ),
'ext' => 'px'
),
array(
'label' => __( 'Padding Vertical', 'dslc_string' ),
'id' => 'css_content_padding_vertical',
'std' => '25',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'padding-top,padding-bottom',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'content', 'dslc_string' )
),
array(
'label' => __( 'Padding Horizontal', 'dslc_string' ),
'id' => 'css_content_padding_horizontal',
'std' => '25',
'type' => 'slider',
'refresh_on_change' => false,
'affect_on_change_el' => '.dslc-accordion-content',
'affect_on_change_rule' => 'padding-left,padding-right',
'section' => 'styling',
'ext' => 'px',
'tab' => __( 'content', 'dslc_string' )
),
$dslc_options = array_merge( $dslc_options, $this->shared_options('animation_options') );
$dslc_options = array_merge( $dslc_options, $this->presets_options() );
return apply_filters( 'dslc_module_options', $dslc_options, $this->module_id );
}
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="dslc-accordion" data-open="<?php echo $options['open_by_default']; ?>">
<?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">
<div class="dslca-editable-content">
<?php
$accordion_content_output = stripslashes( $accordion_content );
$accordion_content_output = str_replace( '<lctextarea', '<textarea', $accordion_content_output );
$accordion_content_output = str_replace( '</lctextarea', '</textarea', $accordion_content_output );
echo $accordion_content_output;
?>
</div>
<?php if ( $dslc_is_admin ) : ?>
<div class="dslca-wysiwyg-actions-edit"><span class="dslca-wysiwyg-actions-edit-hook"><?php _e( 'Edit Content', 'dslc_string' ); ?></span></div>
<?php endif; ?>
</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'; ?>><?php _e( 'CLICK TO EDIT', 'dslc_string' ); ?></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">
<div class="dslca-editable-content">
Placeholder content. 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>
<?php if ( $dslc_is_admin ) : ?>
<div class="dslca-wysiwyg-actions-edit"><span class="dslca-wysiwyg-actions-edit-hook"><?php _e( 'Edit Content', 'dslc_string' ); ?></span></div>
<?php endif; ?>
</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 );
}
}
Any insight on how to fix this would be GREATLY appreciated.
Thanks!
