CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Saurabh Kumar
Saurabh Kumar

Reputation: 16661

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

enter image description here

I am using Twitter Bootstrap and I am having a hard time the aligning some icons with labels when they are inside an accordion.

What I have achieved so far is supplied below, but I wanted the 3 icons on the left with equal spacing and the label on the right.

Also, I want to change the first icon (icon-chevron-down) to (icon-chevron-up) when the collapseOne is shown.

Here is some demo html:

    <div class="accordion" id="accordion2">
        <div class="accordion-group">  
          <div class="accordion-heading">
          <table>  
            <tr>
              <td>
                 <div class="clearfix"></div>
              </td>
              <td>
                 <label title="link ![enter image description here][2]1">link1</label>
              </td>
              <td>
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-chevron-down"></i></a>
              </td>
              <td>  
                <a href="#"><i class="icon-edit"></i></a>
              </td>
              <td>
                <a href="#"><i class="icon-trash"></i></a>
              </td>
             <tr>
            </table>
          </div>  
          <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">  
            <div class="accordion-inner">  
              This is link 1
            </div>  
          </div>
        </div>
        <div class="accordion-group">  
          <div class="accordion-heading">
          <table>  
            <tr>
              <td>
                 <div class="clearfix"></div>
              </td>
              <td>
                 <label title="link 2">link2</label>
              </td>
              <td>
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-chevron-down"></i></a>
              </td>
              <td>  
                <a href="#"><i class="icon-edit"></i></a>
              </td>
              <td>
                <a href="#"><i class="icon-trash"></i></a>
              </td>
             <tr>
            </table>
          </div>  
          <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">  
            <div class="accordion-inner">  
              This is link 2
            </div>  
          </div>
        </div>
        <div class="accordion-group">  
          <div class="accordion-heading">
          <table>  
            <tr>
              <td>
                 <div class="clearfix"></div>
              </td>
              <td>
                 <label title="link 3">link3</label>
              </td>
              <td>
               <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"><i class="icon-chevron-down"></i></a>
              </td>
              <td>  
                <a href="#"><i class="icon-edit"></i></a>
              </td>
              <td>
                <a href="#"><i class="icon-trash"></i></a>
              </td>
             <tr>
            </table>
          </div>  
          <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">  
            <div class="accordion-inner">  
              This is link 1
            </div>  
          </div>
        </div>
      </div>

Upvotes: 2

Views: 5607

Answers (1)

Shail
Shail

Reputation: 3649

The neat way to use will be like below : Jsfiddle Demo

<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>

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

<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>

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

 <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>

Than use the following css :

.accordion-heading > a {
width:8em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.accordion-heading > span {
margin-right:20px;
margin-top:-28px;
}

Upvotes: 3

Related Questions