Making Accordion Title <h4> - Problem with styling

Hello,

I changed the accordion title to be h4 on this page (at the bottom), following the instruction from this topic on the forum.

I’ve added the following CSS to style the h4, there is however a space before the title that I’d like to remove. How can I do this?

/*Style Accordion Title*/
h4.x-accordion-head {
    text-decoration: none;
    font-family: "Roboto Slab",serif;
    display: block;
    letter-spacing:0.05em;
    padding: 10px 15px;
    line-height: 1.7;
    font-size: 16.718px;
    text-transform: none;
    margin-top: 0em;
    margin-bottom: 0em;
    line-height: 1;
}

Thanks,
Antoine

Hi There,

Thanks for writing in!

Please replace the CSS with this.

h4.x-accordion-head { 
    text-decoration: none;
    font-family: "Roboto Slab",serif;
    display: inline-block;
    letter-spacing: 0.05em;
    padding: 10px 15px;
    font-size: 16.718px;
    text-transform: none;
    margin-top: 0em;
    margin-bottom: 0em;
    line-height: 1;
    max-width: 96%;
}

Hope this helps!

Thank you! I noticed the accordion is not working anymore. Does it work on your side (meaning it would be my computer…) or is there a problem with it?

Moreover, I’d like to do the same with the title in a featured list element. Could you please provide the code for this? I guess it must be something similar.

Hi @Lecoqdigital,

It’s not working on my end and looks like javascript related issue. Please try deactivating the cache plugin and test it again.

May I know where is your featured list? For the meantime, you can add this as well

.x-feature-box-title {
    text-decoration: none;
    font-family: "Roboto Slab",serif;
    display: inline-block;
    letter-spacing: 0.05em;
    padding: 10px 15px;
    font-size: 16.718px;
    text-transform: none;
    margin-top: 0em;
    margin-bottom: 0em;
    line-height: 1;
    max-width: 96%;
}

Thanks!

The feature list in on this page (section #3).

HI There,

Thanks for asking again!
I can see the feature list looks fine. Do you still need the css ?

Thanks

Yes, the feature list looks fine but I’d like to make the title of the featured list to be < h3>
How can I do this ?

Moreover, I noticed that the accordion is not working when I make the title to be < h4> using the following code added to the functions.php of my child theme. What should I change to make it work?

/*Make Accordion Title <h4>
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} ><h4 class=\"x-accordion-head\">{$title}</h4></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' );
}

Hello @Lecoqdigital,

Thanks for updating the thread.

Regretfully we can not support modifications with any Cornerstone elements. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

I suggest you to get in touch with a developer or post on Facebook group to get some help.

Please note that the Facebook group is not backed by Themeco. It’s a group created by community members for betterment of community.

Thanks for understanding.

Thank you. I found this code in the forum though, so I hoped you could help me to make it work.
Let’s forget about the Featured List, but what about the Accordion Title? The code I posted is the one I found in the forum and it works to make the accordion title h4, which unfortunately breaks the accordion.

Hi There,

As you already know that code provided on the old forum does not work anymore, that is because that code is for the old version of X, and it breaks if its use for the new version, for this very reason, regretfully we cannot simply provide any customization/modification support for any element.

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

You can find the new Accordion Item function code on accordion.php file under \wp-content\plugins\cornerstone\includes\shortcodes\ directory. Copy that code to your child theme’s functions.php file, and modify it.

If you only want the accordion header to be styled like h4, then please use the V2 (new) Accordion element instead, it has a lot of styling option than the Classic Accordion element.



Thank you for understanding,

Hello,

Thanks for the explanation. I dont want the accordion title to be styled like an H4 but I want it to be an H4 for SEO purpose. This is why I took the code from an old message in the forum (posted by the support).

So you are saying I need to replace something in that code to make in work? I guess it might be a bit tricky due to my code knowledge, but i could give it a try.

Thanks,
Antoine

If you change the tag to h4, it will get the h4 styles so additional custom CSS would be needed.

Regarding custom codes you get here in the forum, they only serve as a guide. Regretfully, we sometimes forget to tell that the act of providing custom code itself is outside the scope of our support. But, we go above and beyond anyway in order to help users. But, this does not mean that we will maintain all the customization suggestions here in the forum and that is the case now.

You need to replace the tag in the code like @friech suggested. I won’t recommend overriding it though as you can see, this something that can break your site in the future. For now, since you’re web development knowledge is limited, you can try to look for accordion plugins that offer what you’re looking for.

A similar feature request has been submitted to us so this would be taken into consideration in future developments.

Thanks.

Hello,

I tried to follow your instruction in order to make the Accordion title H3 but it doesn’t seem to work. Here is the code I added to my child theme, could you please tel me what I did wrong?

You can find the new Accordion Item function code on accordion.php file under \wp-content\plugins\cornerstone\includes\shortcodes\ directory. Copy that code to your child theme’s functions.php file, and modify it.

// Accordion Item
// =============================================================================

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 . '"' : '';
  $title     = ( $title != ''     ) ? $title : 'Make Sure to Set a Title';

  GLOBAL $x_accordion_group_id;

  $toggle_group_id      = ( ! empty( $parent_id ) ) ? $parent_id : ( ( ! empty( $x_accordion_group_id ) ) ? $x_accordion_group_id : false );

  $toggleable_id        = uniqid();
  $attr_toggleable      = ' data-x-toggleable="' . $toggleable_id . '"';

  $class_toggle         = ( $open == 'true' ) ? '' : ' collapsed';
  $attr_id_toggle       = 'id="tab-' . $toggleable_id . '"';
  $attr_toggle_group    = ( ! empty( $toggle_group_id ) ) ? ' data-x-toggle-group="' . $toggle_group_id . '"' : '';
  $attr_aria_selected   = ( $open == 'true' ) ? ' aria-selected="true"' : ' aria-selected="false"';
  $attr_aria_expanded   = ( $open == 'true' ) ? ' aria-expanded="true"' : ' aria-expanded="false"';
  $attr_aria_controls   = ' aria-controls="panel-' . $toggleable_id . '"';

  $class_body           = ( $open == 'true' ) ? '' : ' x-collapsed';
  $attr_id_body         = 'id="panel-' . $toggleable_id . '"';
  $attr_aria_hidden     = ( $open == 'true' ) ? ' aria-hidden="false"' : ' aria-hidden="true"';
  $attr_aria_labelledby = ' aria-labelledby="tab-' . $toggleable_id . '"';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . '<div class="x-accordion-heading">'
              . "<a {$attr_id_toggle} class=\"x-accordion-toggle{$class_toggle}\" role=\"tab\" data-x-toggle=\"collapse-b\"{$attr_toggleable}{$attr_toggle_group}{$attr_aria_selected}{$attr_aria_expanded}{$attr_aria_controls}><h3>{$title}</h3></a>"
            . '</div>'
            . "<div {$attr_id_body} class=\"x-accordion-body{$class_body}\" role=\"tabpanel\" data-x-toggle-collapse=\"1\"{$attr_toggleable}{$attr_aria_hidden}{$attr_aria_labelledby}>"
              . '<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' );
}

Hello There,

Based from your code, I have switched the <a> and <h3> tag. You should use this code:

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 . '"' : '';
  $title     = ( $title != ''     ) ? $title : 'Make Sure to Set a Title';

  GLOBAL $x_accordion_group_id;

  $toggle_group_id      = ( ! empty( $parent_id ) ) ? $parent_id : ( ( ! empty( $x_accordion_group_id ) ) ? $x_accordion_group_id : false );

  $toggleable_id        = uniqid();
  $attr_toggleable      = ' data-x-toggleable="' . $toggleable_id . '"';

  $class_toggle         = ( $open == 'true' ) ? '' : ' collapsed';
  $attr_id_toggle       = 'id="tab-' . $toggleable_id . '"';
  $attr_toggle_group    = ( ! empty( $toggle_group_id ) ) ? ' data-x-toggle-group="' . $toggle_group_id . '"' : '';
  $attr_aria_selected   = ( $open == 'true' ) ? ' aria-selected="true"' : ' aria-selected="false"';
  $attr_aria_expanded   = ( $open == 'true' ) ? ' aria-expanded="true"' : ' aria-expanded="false"';
  $attr_aria_controls   = ' aria-controls="panel-' . $toggleable_id . '"';

  $class_body           = ( $open == 'true' ) ? '' : ' x-collapsed';
  $attr_id_body         = 'id="panel-' . $toggleable_id . '"';
  $attr_aria_hidden     = ( $open == 'true' ) ? ' aria-hidden="false"' : ' aria-hidden="true"';
  $attr_aria_labelledby = ' aria-labelledby="tab-' . $toggleable_id . '"';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . '<div class="x-accordion-heading">'
              . "<h3 class=\"man\"><a {$attr_id_toggle} class=\"x-accordion-toggle{$class_toggle}\" role=\"tab\" data-x-toggle=\"collapse-b\"{$attr_toggleable}{$attr_toggle_group}{$attr_aria_selected}{$attr_aria_expanded}{$attr_aria_controls}>{$title}</a></h3>"
            . '</div>'
            . "<div {$attr_id_body} class=\"x-accordion-body{$class_body}\" role=\"tabpanel\" data-x-toggle-collapse=\"1\"{$attr_toggleable}{$attr_aria_hidden}{$attr_aria_labelledby}>"
              . '<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' );
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

We would loved to know if this has work for you. Thank you.

Thank you. I replaced the code by the one you provided but it does unfortunately not change anything.
I have no idea why.

Hi,

​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Thank you. Here is the Secure Note with the credentials.

Hi,

I checked and can see you are using v2 accordion element.

The code provided above will only work on classic accordion.

Please change your v2 accordion to classic.

Thanks

Thank you. I noticed indeed that it works with the classic accordion. Changing to the classic however also means that I will need much more CSS to achieve the same styling. Is there a way to make the code work for the v2?

Hi,

It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!