V2 Accordion - H Tags Causing Problems with design

Hi There,

I am in the process of changing over my Classic Accordions for the V2 Accordion as it is a huge advantage for me to be able to add H tags to the Accordion Titles. But I am having some issues with styling. When I change the Titles from p to H2 the following occurs

  • Title and the Icon become off line with each other )have tried to adjust margins etc no luck)

  • The Title Font no longer changes color on Interaction with the accordion even though it is set, so it is not visible on hover on when accordion is open

  • I can’t figure out how to make the Title Text Responsive - If I add a responsive class it affects the Title and the Text in the Accordion and I only want to adjust the titles as the H2 Tag size is to large (I have adjusted the H2 Font size a little for the time being - but it would be great if there is a way to apply the responsive class to the title as then I can be sure the Font size 100% matches my other H2s on other pages with the responsive class)

I have uploaded a couple of screen shots - the accordion on the right and left have exactly the same settings - the only variation is that the accordion on the left is where I have applied the H2 Tags.

Any and all help is greatly appreciated!

Cheers

Hi There,

Thanks for writing in!

Seems like you are trying to change the HTML structure of the accordion heading. By default, the style and setting are not as per your requirement. To achieve that you need custom CSS code.

Any customization request is out of our theme support scope, due to fact that there is no accountability od custom code which may cause issue to another element.
I would like to point you to a post which has a similar case, which will help you to get it done.

Hope this helps!

Hi There,

So I completely understand that customizations are out of the scope of help. But I don’t understand why these issues are out of the scope of help - I am having problems with the function of the styling of the V2 element via cornerstone. I have not added any code to modify the accordion - nor do I want to.

I have read through the post that you have linked here - it seems to relate to someone who is using the Classic Accordion and has modified it with css. Which is not the issue I am having at all.

I have not added any code to change the function of the V2 accordion. All I have done is use the style functions of cornerstone to style it. I have selected all the font/background colors / icon sizes etec - the version of the accordion on the right of the photo is how everything is set up.

Then via conerstone I edited the Header section of the Accordion and selected the Accordion Titles as H2s and that is what has made the styling go strange.(the version of the accordion on the left in the photo)

Would love any advice on how to fix issues I am having with the the V2 accordion. Main issues -

  • Title interaction Font Color setting disapears when I make the Title H2
  1. Icon and Title become un aligned once I make Title H2

Cheers

Hi There,

Thanks for the clarification! And sorry for the confusion here.
Mistake my side that I haven’t clarified you properly.

Actually, the Accordion headings are not for the HTML tag. When you are making the text as H2 it’s adding one HTML tag to the heading.

The styling of the heading only works when you enter only text, not any custom HTML. The accordion heading is not built for HTML tag. I completely agree that the text editor shouldn’t be there for the heading which is causing the issue.

In the theme default style, there is CSS for all heading tags, when you are entering an HTML H2 tag in the heading it’s taking the default style, and the styling setting of cornerstone not affecting because the function is not for the h2 or any HTML tag inside the heading.

That’s why in the previous post I told you to need custom CSS if we are using custom HTML. I recommend you not to use any heading tag in the accordion heading to avoid writing custom CSS.

Hope this is clear now!

OK, thanks - yes it’s clear. It’s a shame, it was quite exciting to see that I could add H tags to the Accordion Headings with the new V2 Accordion. Seems pointless now that I change from from the Classic Element, seems pointless actually that they even give you the option to add the H Tags.

Thanks anyway.

Hi there,

It is still possible to wrap the heading title to an h2 tag but you will have to add a CSS to control the styling of the headline.

To do that, you can add this code to the Element CSS of the Accordion element:

$el .x-acc-header-text h2 {
    font-size: 12px;
    margin-top: 0;
} 

Hope this helps.

Thanks for the extra option, very appreciated.

I was able to use the code with minor adjustment

$el .x-acc-header-text h2 {
font-size: 12px !important;
margin-top: 10;
}

This reduced the the font size and centered the icon. Unfortunately though the Header Text Interaction Color still doesn’t apply so when you open the accordion you can’t see the text. I am imagining that the H2 Tag font color settings are overwriting the V2 font color settings.

I have tried a few variations to change the hover and toggle font color via global css not no success so far.

I guess I will just keep playing with it. If not I will have to settle for not having the H2 Tags on the accordion.

Cheers, Nicky

Hi Nicky,

You will need a custom CSS for that as well.

Please add this in Element CSS of the Accordion element:


$el .x-acc-header-text h2:hover {
    color:blue;
}

$el .x-acc-header.x-active h2 {
    color:blue;
}

Change blue with the color that you like…

Hope that helps.

Totally Works! Very, very grateful for the help! Now the accordions works just as I styled and I can have the H2 Tags.

Thanks for the extra effort!

Cheers

Haha - I spoke too soon. The font does change on active/open accordion but not on hover.

What is strange about is is that the font color does change on hover while viewing the page in cornerstone. But once you view the page on front end only the active font color change is applied. Strange

Hello @Scubamobile,

Thanks for updating the thread.

Please update the previous code with following and see how it goes:

$el .x-acc-header-text h2:hover {
    color:blue !important;
}

$el .x-acc-header.x-active h2 {
    color:blue !important;
}

If problem is still there, can you please share exact page URL for us to take a closer look?

Thanks.

Hi There,

Thanks for the reply. Gave adding the !important to the code a go. But still no change.

Still appears to work when I am in Cornerstone though just not on frontend.

URL is

https://scubamobile.com/tours/reef-dives-cozumel-excursion/

Thanks again for your efforts.

Cheers

Hello There,

Please use this instead:

$el .x-acc-header:hover h2{
    color:blue !important;
}

$el .x-acc-header.x-active h2 {
    color:blue !important;
}

Please let us know if this works out for you.

HI there,

This is the same code that Prasant gave me earlier which is partly working.

The font color change on active is working -

$el .x-acc-header.x-active h2 {
color:blue !important;
}

But the font change on hover is not working on the front end

$el .x-acc-header-text h2:hover {
color:blue !important;
}

But the thing that is strange about, as I mentioned in the previous post - is that the font change on the hover does work when I am in cornerstone viewing the page. But once I view it on front end it doesn’t work.

So, this is the part that I can’t figure out. ;-(

Cheers,

Hey There,

​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 at your page and custom css?

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.

Hi there,

Yes sure will attach log in details.

Thanks, Nicky

Hi,

The login provided doesn’t seem to work.

Kindly check again and let us know.

Thanks

Ok, sorry about that - I have just generated a new password. It is attached here. Cheers

Hi @Scubamobile,

The hover is not triggered through h2, but from the button itself. I changed it to this

$el .x-acc-header-text h2 {
    font-size: 18px !important;
    margin-top: 10px !important;
  }

$el button.x-acc-header:hover h2 {
    color:rgb(255,255,255) !important;
}

$el button.x-acc-header.x-active h2 {
    color:rgb(255,255,255) !important;
}

There was invalid CSS too.

Thanks!

Thanks a million for all your help!

You guys do a great job. :slight_smile: