[guybower1Participant]

This reply has been marked as private.

[guybower1Participant]

Sorry, I haven’t explained what I meant properly at all.

I want the heading to remain black box and white text. The dropdown will be black text and white background. I have been able to change what you gave me to reflect this:

.x-accordion-heading .x-accordion-toggle,.x-accordion-inner {
background-color: #FFFFFF;
color: #000000;
}
.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: #000000;
color: #FFFFFF;
}

But what happens is when the accordion is open, the heading text and box both become white and I want them to just remain black background and white text. I’m sorry I wasn’t explaining myself overly well

I have attached a pic showing what happens when it is open. So the dropdown is correct, but the original heading and box need to stay black background and white text

Cheers

[ChristopherModerator]

Hi there,

Please try this code :

.x-accordion-heading .x-accordion-toggle,.x-accordion-heading .x-accordion-toggle:hover {
    background-color: #000;
    color: #fff;
}

It should give you result like attachment.

Thanks.

[guybower1Participant]

Brilliant and thanks so much. Worked like a charm.

You guys are awesome.

Until next query, thanks a bunch

[ChristopherModerator]

You’re most welcome.

[hoponlankaParticipant]

Re to this thread.
I’ve used

a.x-accordion-toggle {
color: black!important;
}

but ‘font-family’ doesn’t seem to work…any idea ?

[ChristopherModerator]

Hi there,

Please try this code :

a.x-accordion-toggle {
    font-family: cursive !Important;
}

Hope it helps.

[michaelgraynzParticipant]

Hi I am having similar issues. I have tried this code in both the local CSS and the Dashboard>appearance> custom CSS and neither work – have I missed something?

.x-accordion-inner p{
margin-bottom:3px !important; /*I add space between px and !important*/
font-weight:normal;
line-height: 1.5; /* The space is coming from the default line height. Adjust 1.5 to your preferred spacing. It is 1.8 by default*/
}

Thank You
Dereck

[Rue NelModerator]

Hey Dereck,

Thanks for updating this thread! 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? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[LeannaParticipant]

Advanced accordion question: Is there any way to have a few lines of the text of an accordion show, and the rest be revealed with click?

[ChristopherModerator]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. 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!

[LeannaParticipant]

ok… is there a way to break a line in the heading? The field doesn’t accept html…I want to make the first line the actual heading in all-caps and the second line a teaser line of the text (not all caps).

At http://leannacinquanta.com/book-treasures-in-dark-places/ I want to move my book reviews/endorsements into the Accordion instead of them hanging out in the Feature List. But I want to add to the heading the first line of the endorsement or a teaser text from the body of the endorsement. For example…

(heading area)
PETER WARREN, YWAM DENVER
I remember Leanna as…

(text area, click to reveal:)
a wide-eyed 23 year old eager…

[Rue NelModerator]

Hello There,

Thanks for updating in! Because you are not allowed to add a <br> code in the accordion item titles, we will make it in two lines using a JS script. But first you must add an ID to the accordion item just like this: http://prnt.sc/e1ojx4

And then you can go to the settings tab, Settings > Custom JS and insert the following nifty js code

(function($){
  $('#toggle-1 .x-accordion-toggle').html('PETER WARREN, YWAM DENVER <br>I remember Leanna as…');
})(jQuery);

Hope this helps. Kindly let us know.

[LeannaParticipant]

hmm that would be alot of extra coding for each accordion item, out in Customizer. I want the double title line in all accordion items on that page. Is there a way to tell the entire accordion incidence on that particular page to make the double line in the title of each item?

[RadModerator]

Hi there,

Unfortunately, that’s not possible. Since HTML are removed, there is no cue point where the line breaks are placed. Hence, you have to manually add them like in the sample code.

Buf you can add something like this on the title,

PETER WARREN, YWAM DENVER \brI remember Leanna as…

Where \br is our cue point, then you can change the above javascript to this.

(function($){

  $('.x-accordion-toggle').each( function() {
  
      $(this).html( $(this).text().replace('\br', '<br>') );

  } );

})(jQuery);

You can decide what marker you wish to implement, just as long as you change it within the javascript too.

Hope this helps.

[Author]

Posts