Rectangle 27 0

jquery How to align icons and labels in an accordion using Twitter Bootstrap?


<div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
        href="#collapseOne"><i class="icon-home"></i> Headinghjhkjhjkhkjhkjhkjhkjhkjhkjhjkhkjhjkhkjhjkhjk</a>
  <span class="ico-pull pull-right"><i class=" icon-chevron-up"></i>  <i class="icon-edit "></i><i class="icon-trash"></i>
            </span>
    </div>
.accordion-heading > a {
width:8em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.accordion-heading > span {
margin-right:20px;
margin-top:-28px;
}
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseOne"><i class="icon-home"></i> Heading<span class="pull-right"><i class=" icon-chevron-up"></i> <i class="icon-edit "></i><i class="icon-trash"></i></span></a>
<div class="accordion-heading">
 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseOne"><i class="icon-home"></i> Heading <i class="icon-chevron-down"></i>   <i class="icon-edit"></i><i class="icon-trash"></i></a>
</div>

And also my a text (Heading in your case) is of variable width so to have a good look and feel I want all 3 icons on extreme right and if the text is more than certain length i will put something like Heading.... . Any idea regarding how it can be achieved

As you have mentioned in your comment that, your headings are of variable length ,put the span out of the a tag , see below:

Than use the following css :

To pull the icons right(as per your comment) you can do following :

Yes you can use text-overflow:ellipsis for the heading so if the text is longer than expected the dots get visible .

You will have to use text-overflow:ellipsis property , I have updated the jsfiddle for it . Plz check

in <div class="accordion-inner">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div> .It dosent respect the boundaries. Any ideas?

okay. I will try to see. But i change the demo and came across another problem. Yes the text problem. If the text is continuous it doesn't respect the boundaries.

Note