Menu icon Foundation
Center Accordion Icons for open/close

I added in a plus/minus symbol using Font Awesome on my Accordions. They look ok but they are not quite centered vertically with the text. I added a border around them to see what's happening and the icon is sitting outside the box. Not quite sure why. I created a code pen to show what I've done. Can anyone show me a better way or something I'm missing in order to vertically center each icon within li? Here's the code pen: http://codepen.io/clizlee/pen/meRaRL

accordion

I added in a plus/minus symbol using Font Awesome on my Accordions. They look ok but they are not quite centered vertically with the text. I added a border around them to see what's happening and the icon is sitting outside the box. Not quite sure why. I created a code pen to show what I've done. Can anyone show me a better way or something I'm missing in order to vertically center each icon within li? Here's the code pen: http://codepen.io/clizlee/pen/meRaRL

balazs sziklai about 4 years ago

Hi there!

the problem is the absolute position
http://codepen.io/28inch/pen/meRaKG

Carolyn Lee about 4 years ago

Ok. Yes I had the float before but I had a problem still centering the icon if for example the title was longer and pushed it to 2 lines. Also the text moves into the vertical space above the icon. http://codepen.io/clizlee/pen/MaJZxe

Carolyn Lee about 4 years ago

Also one other question:
How do I make the active accordion list item to show the minus icon when it hasn't been clicked yet but it is expanded?
http://codepen.io/clizlee/pen/MaJZxe

james murphy about 4 years ago

Add the "active" class to the list item on line 75.

Carolyn Lee about 4 years ago

Ah ok. Was adding it to the wrong thing. Thanks!

Valerie Newby about 4 years ago

Carolyn - Did you get the issue with vertical centering of the icon when the title is two lines long figured out? I'm having the exact same issue and not having a lot of luck.

Best solution I found was adding this to the ::after element css

position: relative;
top: 50%;
transform: translateY(-50%);

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Which fixes the two-line title one, but breaks the rest.

Carolyn Lee over 3 years ago

Valerie, I thought I had fixed it but using the float doesn't totally work without problems. I eventually commented out that piece of code for my plus/minus sign. But I'm trying to make it work again. Let me know if you ever were able to get it to work. If I figure out something I'll post back also.

Valerie Newby over 3 years ago

Carolyn - I decided to fall back to using svg background-images. Less elegant than doing css content with the foundation icon, but it works and this was taking too much time. I'm still not perfectly happy with the 96% rather than a set pixel margin-right, but it's not a major issue. If you do come up with something else, I'd appreciate hearing about it.

.accordion .accordion-navigation > a, .accordion .accordion-navigation > a:hover {
  text-decoration: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAADdJREFUGBljYEADCxYs+K+kpPR/z549/5GlmJA5+NjUV8gIcktaWho+WxkkJCQYiLYaw6RB6GsA2KsTq6ZLKB4AAAAASUVORK5CYII=");
  background-position: 96% 50%;
  background-repeat: no-repeat;
}

.accordion .accordion-navigation.active > a, .accordion .accordion-navigation.active > a:hover {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAACFJREFUGBljYBj8gHHbtm3/c3Jy8LpUS0uLgQmviiEmCQCT/ATnjbCCJwAAAABJRU5ErkJggg==");
  background-position: 96% 50%;
  background-repeat: no-repeat;
}

Carolyn Lee over 3 years ago

Valerie, here is what I did. My text in my accordions was sometimes quite long and since on my pages I can potentially have quite a few of them, I opted to restrain the text on the .accordion .accordion-navigation > a to one line only:

.accordion .accordion-navigation > a { 
  font-family: 'Droid Serif', serif; 
  color: #5e4631; 
  font-weight: bold;
  background: #edeae5;
  border: 1px solid #b1a89b;
  padding-left: 3.75rem;
  padding-right: 2.25rem;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

And then I went back to using absolute positioning for my icon:

.accordion-navigation > a:after {
    content: "\f055";
  font-family: FontAwesome;
    position: absolute;
  right: 1.75rem;
  z-index: 1;
}
.accordion-navigation.active > a:after {
    content: "\f056";
  font-family: FontAwesome;
}

That works just perfectly but only because no matter what screen size, my accordions are only ever 1 line. But it works great for me because then if on a small screen, you don't have to scroll and scroll so much, you can see what you want to click on and then the full info is under each item.

So not sure if that would work for what you're doing, but I finally got it to where I'm really happy with it.
Hopefully it works right across devices and browsers. :)