Making Accordion Title <h4> - Problem with styling

Prasant · September 17, 2018, 4:57pm

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.

antoine_generau · September 17, 2018, 6:27pm

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.

friech · September 17, 2018, 10:56pm

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,

antoine_generau · September 18, 2018, 5:56am

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

christian · September 18, 2018, 10:19am

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.

antoine_generau · September 27, 2018, 2:56pm

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' );
}

ruenel · September 27, 2018, 7:59pm

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.

antoine_generau · September 28, 2018, 8:09am

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

paul.r · September 28, 2018, 8:57am

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.

antoine_generau · September 28, 2018, 9:29am

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

paul.r · September 28, 2018, 10:18am

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

antoine_generau · September 28, 2018, 11:08am

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?

paul.r · September 28, 2018, 12:48pm

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!

antoine_generau · September 28, 2018, 5:03pm

Thank you, I understand and therefore tried to get the same result with some CSS. I still face some problems though:

How can I change the color of the bar with the title when an accordion item is opened? I managed to get the correct style by mouse hover, but did not find how to apply it to the active title.
I changed the size of the icon before the title using font-size:1.5em; to the element .x-accordion-heading .x-accordion-toggle:before but by doing so, this is not aligned with the title anymore, and the title is not vertical centered. What should I use instead to do so?

See here an accordion item v2 at the top and the classic accordion item I want to style at the bottom:

Thanks,
Antoine

Prasant · September 28, 2018, 8:55pm

Hello @Lecoqdigital,

Thanks for updating the thread.

You can change the accordion active title background color by adding following CSS code under X > Theme Options > CSS:

.x-accordion-heading .x-accordion-toggle {
    background-color: #ddd;
}

To adjust the icon alignment, please add following CSS under X > Theme Options > CSS:

.x-accordion-heading .x-accordion-toggle:before{bottom: -3px !important;}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

antoine_generau · September 29, 2018, 7:22am

Thank you very much for your help. The only thing which is now missing is to find the proper CSS code selector for the heading when an accordion is opened after you select it. I’d like to apply the save code as the mouse hover effect:

.x-accordion-heading .x-accordion-toggle:hover {
    color: rgb(193,0,1);
    background-color: rgb(232,232,187) !important;
}

Is there a CSS code selector for this? I could not find it.

Thanks,
Antoine

thai · September 29, 2018, 10:24am

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.x-accordion-heading .x-accordion-toggle:not(.collapsed) {
    color: #ca3b3b;
}

Hope it helps

antoine_generau · September 29, 2018, 1:57pm

Perfect, thank you!

(I though about using something like you did but had no idea if it was possible. I’ll know for next time )

thai · September 29, 2018, 3:45pm

You’re welcome.

system · October 9, 2018, 3:45pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.