Accordion toggle arrow

please provide a link to your site

I can’t – it’s developed locally.

Thanks

Andrew

The two rules that govern this are:

.responsive-tabs__heading:after {

		border-top: 6px solid #444;

and for the currently selected one:

.responsive-tabs__heading--active:after {
		border-bottom: 6px solid #404040;
}

Hello and thanks for the reply.

I have used the code you mentioned to change the color of the actual accordion background but the problem I have is that I cannot see the ‘up’ and ‘down’ arrow that changes when a tab is open or closed and I cannot find a reference to it in the CSS.

Thanks

Andrew

These are the rules that you need to alter to change the colours of the arrowheads. These two rules will not change the colours of the accordion background, so I am not sure what you are referring to.

If you used the recommended method to use custom css for the tabs, you can change the colours given in these two rules to customize the arrowheads for the accordion tabs in the normal state and when active.

As I cannot see your site I cannot give you any suggestions for what to change these values to.

How have you implemented the custom css for the tabs? Is is by using the method described on the plugin page ie by prevent the built-in styles from loading, copying the contents of the plugin’s stylesheet into your child theme or custom styles plugin and making the changes to that? or did you make the changes by some other method.

Thanks Michael,

I think I will back track and start again. All of the changes I have made were made to the actual tabby CSS and not in the theme. I didn’t actually make any changes to the arrow heads so I am not sure what is wrong but will let you know once I have started again.

Thanks for the time and for your help.

Andrew

You should never make changes to the code of any plugin unless you are forking the plugin into a new version with a different name. Otherwise any changes you make will be lost on the next plugin update.

The css to draw the arrowheads in the plugin uses the top or bottom border (depending on whether it is the active tab or not) of an otherwise invisible pseudo element. This is the same technique that Chris Coyier describes at https://css-tricks.com/snippets/css/css-triangle/

Thanks,

I have managed to sort it out step by step.

I know I shouldn’t make changes to the code but I have the original and when I used inside the actual theme it broke.

Thanks again for your time.

Andrew