Question

I would like to obtain the following effect using twitter bootstrap. One link for the collapse action, and another link for a different action:

Right now I’m getting this by setting the another link with a pull-right class and padding the item. Is there a better way?

Here’s the code that matters (sorry but it’s in jade, either way I think it’s easily understood)

div.accordion-heading
    div.row-fluid
        div.span6
            a.accordion-toggle(href="#", data-parent="main-accordion", data-toggle="collapse")= "Collapse Link"
        div.span6
            a.pull-right(style="padding:8px 15px")= "Another Link"

Best Regards

Answer 1

You might get a bit more clean with that :

div.accordion-heading
    div.accordion-toggle.group-accordion-toggle
        a(href="#", data-parent="main-accordion", data-toggle="collapse")= "Collapse Link"
        a.pull-right= "Another Link"

And that (to avoid the pointer everywhere):

.accordion-toggle.group-accordion-toggle { cursor: inherit; }

Demo (jsfiddle)