[jbarredoParticipant]

Hi there!

I would like to know how can I upgrade titles in accordion to H2 using the class box at the settings.

Thank you in advanced!

[ThaiModerator]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-accordion-heading .x-accordion-toggle {
    font-size: 200%;
    line-height: 1.2
}

Hope it helps 🙂

[jbarredoParticipant]

this is a not real h2 title

is important for seo position

is posible put an h2 class in the title of accordion?

thanks

[ThaiModerator]

Hi There,

Please add the following code under functions.php file locates in your child theme:

function x_shortcode_accordion_item_v2( $atts, $content = null ) {
  extract( shortcode_atts( array(
    'id'        => '',
    'class'     => '',
    'style'     => '',
    'parent_id' => '',
    'title'     => '',
    'open'      => ''
  ), $atts, 'x_accordion_item' ) );

  $id        = ( $id        != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class     = ( $class     != ''     ) ? 'x-accordion-group ' . esc_attr( $class ) : 'x-accordion-group';
  $style     = ( $style     != ''     ) ? 'style="' . $style . '"' : '';
  $parent_id = ( $parent_id != ''     ) ? 'data-cs-collapse-parent="#' . $parent_id . '"' : '';
  $title     = ( $title     != ''     ) ? $title : 'Make Sure to Set a Title';
  $collapse  = ( $open      == 'true' ) ? 'collapse in' : 'collapse';
  $collapsed = ( $open      != 'true' ) ? ' collapsed' : '';

  $output = "<div {$id} class=\"{$class}\" {$style} data-cs-collapse-group>"
            . '<div class="x-accordion-heading">'
              . "<a class=\"x-accordion-toggle{$collapsed}\" data-cs-collapse-toggle {$parent_id} ><h2 class=\"x-accordion-head\">{$title}</h2></a>"
            . '</div>'
            . "<div class=\"x-accordion-body {$collapse}\" data-cs-collapse-content>"
              . '<div class="x-accordion-inner">'
                . do_shortcode( $content )
              . '</div>'
            . '</div>'
          . '</div>';

  return $output;
}
add_action('wp_head', 'change_shortcode_accordion');
function change_shortcode_accordion() {
	remove_shortcode( 'x_accordion_item' );
	add_shortcode( 'x_accordion_item', 'x_shortcode_accordion_item_v2' );
}

After that add the following CSS under Customizer > Custom > Global CSS:

h2.x-accordion-head {
    margin-top: 0;
    font-size: 18px;
    display: inline-block;
}

Hope it helps 🙂

[Author]

Posts