CODEWITHSUNDEEP
twitter-bootstrap
kingkode
kingkode

Reputation: 2220

Twitter Bootstrap accordion group item with no content

I am trying to make an accordion with only a few items that expand with child elements and 2 items that do not have child elements that would close anything that is open.

I have a fiddle setup here

You can see on item #3 there is content in the .accordion-inner div but I do not want that displayed. Also you will see on item #4 there is no .accordion-inner inside #collapseFour which breaks the accordion completely.

Question 1: Is this possible with the Twitter Bootstrap accordion?

Question 2: Is there a better way of going about this process?

Code:

<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">
        Collapsible Group Item #1
      </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 class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        This is where i do not need child elements
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
        Collapsible Group Item #4
      </a>
    </div>
    <div id="collapseFour" class="accordion-body collapse">

    </div>
  </div>
</div>

Upvotes: 0

Views: 4103

Answers (4)

omma2289
omma2289

Reputation: 54629

How about this, I added an attribute to tell the links to close all open tabs and used this jQuery function:

$('a[data-close]').click(function () {
    $($(this).data('parent')).find('.in').collapse('toggle');
});

This will give you the nice slide toggle effect.

Chek out the fiddle

Upvotes: 0

Mohammad Dohadwala
Mohammad Dohadwala

Reputation: 311

Non- Jquery Solution

Try this updated code here.

The 3rd accordion inner will not expand when clicked. And the shown accordion-inner will collapse.

Upvotes: 0

Schmalzy
Schmalzy

Reputation: 17324

jsFiddle I believe this is exactly what you are looking for.

just hide them using the proper functions.

$('#collapseFour').on('show', function () {
    $('#collapseFour').collapse('hide');
});

$('#collapseThree').on('show', function () {
    $('#collapseThree').collapse('hide');
});

Upvotes: 2

Verran
Verran

Reputation: 4072

If you don't mind that it won't collapse the other areas when you click on it, you could just remove the href="#collapseThree" element from the tag

Upvotes: 0

Related Questions