Jump to content

How to align plus icon of accordion to the right of text even when it wraps

Go to solution Solved by jpeter,

Recommended Posts

Posted (edited)

Site URL: https://bluebird-ferret-emn3.squarespace.com/en/about

Hello,

 

The page I am working on is https://bluebird-ferret-emn3.squarespace.com/en/about

pw: plena

 

When the text wraps, the accordion container takes up 100% width of the space so it does not align with the text.  Is there any way to keep the plus icon next to the text the way it does before it wraps?  You can see in the last brown accordion item where the alignment issue is.

 

I used  the following code to get it to display to the right of the text.

 

.accordion-item__click-target { width:auto !important; 

 

Thanks in advance

 

image.thumb.png.4fca8b5661decfddaeae35cdedab0d52.png

Edited by junger
  • Solution
Posted (edited)

@junger

You can try this css:

/* Use ::after pseudo-element and a "+" character to display next to text */
#block-yui_3_17_2_1_1654209124778_2884 .accordion-item__title:after {
  content: '+';
  display: inline-block;
  font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 100;
  font-size: 5rem;
  vertical-align: text-top;
}

/* Update icon to a "–" when accordion expanded  */
#block-yui_3_17_2_1_1654209124778_2884 [aria-expanded="true"] .accordion-item__title:after {
  content: '–';
}

/* Hide default icon */
#block-yui_3_17_2_1_1654209124778_2884 .accordion-icon-container {
  display: none;
}

Here's what it looks like on my end:

image.thumb.png.53d8b7820267a008b4b88182d84cbbfc.png

Edited by jpeter

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.