Question

How to have following layout for expand/collapse functionality?

+ This is header having some text and links   
      This is item which was shown pressing + sign
      This is another item...

Twitter Bootstrap has functionality but I cannot edit that Collapsible Group Item #1 to be just ‘+’ sign AND have plain text/links right after that.

Live http://jsfiddle.net/c4jMh/2/ where the problem is visible and same code also here:

    <div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        +
      </a>
        This line should be next to above '+' sign and here some example link to be reside on that line also <a href="http://jsfiddle.net/">jsfiddle.net</a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

I’m trying to use Bootstrap on web2py framework to that matter.

Answer 1

I also came with solution where there is no table formatting used http://jsfiddle.net/c4jMh/4/

<div class="accordion" id="accordion2">
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle group-accordion-toggle">
            <a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class=""><i class="icon-plus"></i></a>
            <a href="http://jsfiddle.net/">jsfiddle.net</a>
        </div>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
        <div class="accordion-inner">Anim pariatur cliche...</div>
    </div>
</div>

<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"><i class="icon-plus"></i>Collapsible Group Item #2
        </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">Anim pariatur cliche...</div>
    </div>
</div>

​

$('.accordion').on('show hide', function(e) {
$(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus', 200);});