Docs

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[chriscarr1951]

Hi,

Another request.

Can we use the double line to the right / end of the sentence to open and then animate it – turning it down to reveal the text similar to the turning crosses animation

I will put the image as an attachment.

Similarly for testimonials Can we use arrows to continue the text animated to work across unopened and down when. Scale and match the font so it is the same and enable it to look like a continuation of the first sentence.

[chriscarr1951]

Can we use the double line to the right / end of the sentence to open and then animate it – turning it down to reveal the text similar to the turning crosses animation
Image
Image
Similarly for testimonials Can we use arrows to continue the text animated to work across unopened and down when. Scale and match the font so it is the same and enable it to look like a continuation of the first sentence.

see image below

the pages with the accordions are:

http://fionacampbelldesign.co.uk/wp/aligned/sevices/?cornerstone=1 and
http://fionacampbelldesign.co.uk/wp/aligned/about-how/?cornerstone=1

thanks so much

[Rue Nel]

Hello There,

Thank you for the clarifications! To have something like this,

You can make use of this code:

.cs-content .x-accordion-heading .x-accordion-toggle:before{
  content: "\f103";
  font-size: 18px;
  color: #000 !important;
  transform: none;
}

.cs-content .x-accordion-heading .x-accordion-toggle.collapsed:before{
  content:"\f101";
  font-size: 18px;
  color: #000 !important;
  transform: none;
}

Please let us know if this works out for you.

[chriscarr1951]

This reply has been marked as private.

[Rue Nel]

Hello There,

Do you want something like this?
http://prntscr.com/d5trnq

If that is the case, please make use of this code instead:

.cs-content .x-accordion-heading .x-accordion-toggle:before{
    display: none !important;
}

.cs-content .x-accordion-heading .x-accordion-toggle {
    position: relative;
    padding-right: 40px;
}

.cs-content .x-accordion-heading .x-accordion-toggle:after{
  position: absolute;
  top: 20px;
  right: 10px;
  margin-left: 40px;
  transition: all 0.3s ease;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  content: "\f103";
  font-size: 18px;
  color: #000 !important;
  transform: none;
}

.cs-content .x-accordion-heading .x-accordion-toggle.collapsed:after{
  content:"\f101";
  font-size: 18px;
  color: #000 !important;
  transform: none;
}

Hope this helps.

[chriscarr1951]

That is pretty much perfect, But is there a bit of code that gets the arrows on the same line as accordion title

Many thanks

[Rue Nel]

Hello There,

Thanks for updating in! The only problem is the location of the arrow. Please have the code updated and use this instead:

.cs-content .x-accordion-heading .x-accordion-toggle:before{
    display: none !important;
}

.cs-content .x-accordion-heading .x-accordion-toggle {
    position: relative;
    padding-right: 40px;
}

.cs-content .x-accordion-heading .x-accordion-toggle:after{
  position: absolute;
  top: 5px;
  right: 10px;
  margin-left: 40px;
  transition: all 0.3s ease;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  content: "\f103";
  font-size: 18px;
  color: #000 !important;
  transform: none;
}

.cs-content .x-accordion-heading .x-accordion-toggle.collapsed:after{
  content:"\f101";
  font-size: 18px;
  color: #000 !important;
  transform: none;
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts