Help with accordions

Support
#1

hello guys!

I have a question on the accordion element.

The new one is not working well because when I insert the text in the title, it becomes too large although I use one line only… screenshot below.

the classic one is ok but I would like the headers to be of this #088691 color instead of dark grey, is it possible?

thanks for your help
cheers :slightly_smiling_face:
isabella

thanks

1 Like
#2

Hey Isabella,

There’s currently a known issue when you use the Rich Text editor for the Accordion Title.

Please switch to the HTML editor and remove the tags surrounding your text.

Hope that helps.

#3

Hey there thanks

I am not using the rich text. and I removed the tags but when I go back to Text it goes back to double line…

I can use the classic text as the line above. I just need to know how to make the grey area in another color. Can you help me?

thanks

#4

Hello Isabella,

Thanks for updating the thread.

Please inspect the Accordion element and under Header > Header Setup > Background you can change the background color. Please take a look at following screencast.

For Classic Elements, please add following CSS under X > Theme Options > CSS:

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

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

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.

#5

Hello @prasant

I would have used th advanced mode element editing tool if it worked. but it doesn’t . so I had to go for the classic.

The code worked fine.
Thanks a lot for your help
cheers
ps. you should fix the new version though :wink:

#6

Hey @isa1978,

Yes, we’re working to iron out that issue with the Rich Text and the Accordion Heading.

I should have added previously though that when you switch to HTML editor, you should not go back to Rich Text or don’t use Rich Text for the Accordion Heading. In your previous screenshot, you went back to using Rich Text. WordPress will automatically insert p tags again.

Thanks.

#7

Hello Christian I never used rich text. I don’t even have it enabled. not even sure what it is.

Now I have another issue though. I used the classic accordion and I get this message
Why!?!? can you please help!?

thanks a lot
Isabella

#8

Hello Isabella,

Thanks for updating the thread. :slight_smile:

Please try out the solution shared in following thread regarding the error message you are getting:

In case problem is still there then please share website login details in secure note for us to take a closer look at the setup.

Thanks.

1 Like
#9

Thanks I will do so.
thanks

#10

You are most welcome. :slight_smile:

1 Like
#11

I have checked the content using the skeleton mode but everything seems fine.

Would you mind to have a look please?

#12

Hi Isabella,

Here’s the issue, Rel:"Nofollow noopener" that is on the 5th Accordion item (titled: IS BAHAMAS SAFE TO VISIT?)


Please remove that Rel:"Nofollow noopener" and your Classic Accordion will be back to normal.

It seems you’re confused about HTML editor and Rich Text editor, take a look on the following screenshot.

What Christian is saying is, when editing a (new) Accordion element’s title, do not use the Rich Text editor. Switch/stay on the HTML editor.

Hope that shed some lights,
Cheers!

#13

oh I understand now! thanks a lot for your help :slight_smile:

#14

However I need the no follow tag there… what can I do?

#15

Hey Isabella,

Rel:"Nofollow noopener" will produce an error because it’s an incorrect HTML syntax. The correct one is rel="nofollow noopener". Try that one out.

Thanks.

#16

oH!!! right! thanks a lot :slight_smile:

#17

We are delighted to assist you with this.

Cheers!

1 Like
#18

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