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

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



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



Edited by junger
Link to comment
  • Solution


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:


Edited by jpeter
Link to comment

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.