[shortcoastParticipant]

Hello,
I would like to have certain parts of the content I have on a portfolio item to be hidden/collapsed at first and expandable only once you click on a “read more” or “expand” text link.

And all this only if you’re viewing the site from a smartphone device.

The overall aim is to avoid the user to scroll down the page too much, by having some parts of the page collapsed and eventually viewable only if desired.

Any suggestion on how to reach this goal?

Thx!

[Paul RModerator]

Hi,

Thanks for writing in!

You can try the accordion shortcodes.

http://theme.co/x/demo/integrity/1/shortcodes/accordion/

Hope that helps.

[shortcoastParticipant]

Thanks!
It is helpful, indeed 🙂

I used the accordion shortcodes on a portfolio page and I noticed that, when used on the right-column, the font size of the accordion call-to-action looks bigger (see below).

Is it possible to amend the font size to be the same as the rest of the copy there?

And is it possible somehow to use icon shortcodes (http://theme.co/x/demo/integrity/1/shortcodes/icons/) inside the accordion call-to-action field?

thanks!

[Rue NelModerator]

Hello There,

Thanks for the updates! To change the font size of the accordion toggle heading, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.single-x-portfolio .x-accordion-heading .x-accordion-toggle {
    font-size: 13px;
}

You might need to change the font size that will match your portfolio content’s font size. In addition, regretfully you may not be able to use other icon in the accordion toggle heading simply because you already have an icon a plus and x icons which would indicate whether the accordion is collapsed or expanded. Unless other wise you want to display a different icon to represent the collapse and expanded state.

Please let us know how it goes.

[shortcoastParticipant]

Thanks!
The font size is fine now 🙂

Re the icon, may I also ask you how to change the +/x standard icon and its color, please?
I’d need to change that icon only on the accordion element used on the right-side of the portfolio page, not on another accordion element that I’m using on the left-side (main side) of the same page.

thx again

[FriechModerator]

Hi There,

To assist you with this issue, we’ll first need you to provide us with your URL. 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.

Thanks.

[shortcoastParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

To change the icon, you need to add the following css code in your child theme’s style.css

.single-x-portfolio  .x-accordion-heading .x-accordion-toggle:before {
  content: "\f114";
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);

  font-size: 16px;
}

.single-x-portfolio .x-accordion-heading .x-accordion-toggle.collapsed:before {
  content: "\f115";
}

Adding this code in your customizer will not work because the customizer will automatically strip out forward slash and backward slash. You can get the css rule for your desired icons from here: http://fontawesome.bootstrapcheatsheets.com/

Hope this would help.

[shortcoastParticipant]

Thanks!
It works fine but I’d like also to have the change of the icon affecting only the accordion item on the right-side, while now it’s actually affecting both the left-side and the right-side columns.
Is there a way to limit the icon change to only the right-side?

cheers!

[Rue NelModerator]

Hello There,

Please have the code update by using this:

.single-x-portfolio .entry-extra .x-accordion-heading .x-accordion-toggle:before {
  content: "\f114";
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);

  font-size: 16px;
}

.single-x-portfolio .entry-extra .x-accordion-heading .x-accordion-toggle.collapsed:before {
  content: "\f115";
}

Hope this helps.

[shortcoastParticipant]

awesome, it works perfectly!

thanks a million! 🙂

[Rue NelModerator]

Hey There,

You’re most welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts