Cherylbbb Cherylbbb - 3 months ago 8
jQuery Question

How to align glyphicon with first line of accordion title

Please see my demo: http://www.bootply.com/COm6fikZKx

I'm thinking about aligning 2 glyphicons-
'down arrow' when the collapse is open and 'right arrow' when the collapse is closed.

It's problematic when the accordion heading/title comes to 2 lines and mobile version

How can I make the glyphicon always align with the first line to the left and not fall down to the last line of the text?

Thank you so much!

Answer

CSS has been modified. check the example code here CODEPEN. It will fix your issue.. :)

.panel-title {
  position: relative;
}

.panel-heading .accordion-toggle {
  padding-left: 25px;
  display: block;
}

.panel-heading .accordion-toggle:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  /*glyphicon glyphicon-chevron-right*/
  color: #333f48;
  float: left;
  position: absolute;
  left: 0;
  top: 0;
}

.panel-heading .accordion-toggle.collapsed:after {
  font-family: 'Glyphicons Halflings';
  content: "\e080";
  /*glyphicon glyphicon-chevron-down*/
  color: #333f48;
  float: left;
  position: absolute;
  left: 0;
  top: 0;
}