37

I am dynamically adding Collapsable elements to a page. Bootstrap uses the "data-target" attribute to specify which element the collapse toggle applies to.

From the docs:

The data-target attribute accepts a css selector

Is there a way to write a selector which specifies the next sibling of the parent element? All of the examples from the docs seem to use selections by ID.

Specifically the HTML looks like:

<div class="accordion-group">
<div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne">
    Generated Title
  </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">
    Generated Content... this is big and sometimes needs collapsing
  </div>
</div>
</div>

I would like to write something like (pseudo code using jquery syntax illegally):

<a class="accordion-toggle" data-toggle="collapse" data-target="$(this).parent().next()">

But I am starting to suspect this may not be possible with CSS selectors.

Right now as a workaround I am generating a new ID (an incrementing number appended to a string) when I create the element.

Is there a nicer approach using a selector? Should I be using some post-creation javascript to set the data-target attribute? Is generating IDs for dynamic content the standard approach?

5
  • Would you mind posting the code that takes the data-target attribute's value and performs the search (would be in twitter's bootsrap, presumably)?
    – aefxx
    Oct 9, 2012 at 18:13
  • 1
    what you want is a jQuery selector and as it says in the docs, you must give css selector. You should stick with IDs. It's also the fastest way for JS to find element which is why it works that way ;)
    – Miha Rekar
    Oct 9, 2012 at 18:16
  • @aefxx A reasonable request but I wouldn't know where to begin looking. I am using bootstrap 2.1.1 via <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script> for what it's worth.
    – Soverman
    Oct 9, 2012 at 18:17
  • @MihaRekar Good to know, thanks! I'm new to this stuff and it felt strange, hence this question. If that's the standard approach I'll stop worrying.
    – Soverman
    Oct 9, 2012 at 18:19
  • 2
    @MihaRekar Regardless of what the docs might say, the actual implementation of the plugin uses the data-target value as a jQuery selector.
    – merv
    Oct 9, 2012 at 23:23

7 Answers 7

30

While it is true that the selector in a data-target attribute is a jQuery selector, the data-api specification for this plugin provides no means of referencing back to this in the scope of execution (see lines 147-153 in bootstrap-collapse.js for its use).

However, I would like to offer another alternative approach, which is to extend the data-api with your own custom toggle specifier. Let's call it collapse-next.

JS (see update note)

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function (e) {
  var $target = $(this).parent().next()
  $target.data('collapse') ? $target.collapse('toggle') : $target.collapse()
})

HTML

<a class="accordion-toggle" data-toggle="collapse-next">

JSFiddle (updated)

Downside here is that it's a rather tightly coupled approach, since the JS presumes a specific structure to the markup.


Note about IE issues

As @slhck pointed out in his answer, IE9 and under apparently fail on the first click when using an earlier revision of my answer. The cause is actually not an IE issue at all, but rather a Bootstrap one. If one invokes .collapse('toggle') on a target whose Carousel object is uninitialized, the toggle() method will be called twice - once during initialization and then again explicitly after initialization. This is definitely a Bootstrap bug and hopefully will get fixed. The only reason it doesn't appear as a problem in Chrome, FF, IE10, etc, is because they all support CSS transitions, and hence when the second call is made it short-circuits because the first one is still active. The updated workaround above merely avoids the double-call problem by checking for initialization first and handling it differently.

4
  • A most excellent solution merv, exactly what I was looking for.
    – Soverman
    Oct 9, 2012 at 23:33
  • @Soverman Glad to help. Also, I forgot to namespace the listener uniquely, so I added that now.
    – merv
    Oct 9, 2012 at 23:40
  • 9
    For boostrap 3, you have to replace $target.data('collapse') with $target.data('bs.collapse') to make it work. Very cool solution btw, thank you :) May 7, 2014 at 8:46
  • @Julian Xhokaxhiu , thanks a lot. It really saved my day.
    – sugar
    Aug 12, 2016 at 7:26
7

No javascript solution or the solution depends on bootstrap's JS already in use, just exploiting the DOM structure-

See the data-target=""...

A hint to avoid bulky solutions and need no ID or extra JS, trick using markup placement-

<button data-toggle="collapse" data-target=".dropdown-toggle:hover + .more-menu" type="button" class="btn btn-primary dropdown-toggle" >
  Show More Menu +
</button>
<div class="collapse more-menu">More menu here...</div>

This CSS selection structure will select the desired DOM .dropdown-toggle:hover + .more-menu and there we can apply our desired CSS. There are more ways to exploit what we have. :hover or :active or so many other ways.

3
  • 1
    Brilliant! Simply brilliant! data-toggle="collapse" data-target=".card-header:hover + .collapse" "just works"! Same trick can be applied to selecting group parent of the .collapse panel.
    – AnrDaemon
    Jun 2 at 14:08
  • 1
    The only caveat is that it won't work with touch interface. Bummer!
    – AnrDaemon
    Jun 2 at 14:29
  • @AnrDaemon Thanks for pointing it out. may be it can be handled by jQuery over time. Jun 5 at 17:43
5

@merv's solution didn't work for me in IE9 and below, since the collapsible state wasn't available unless you clicked at each item once. It did work fine in Firefox and Chrome though. So after two clicks, everything would work.

What I did was set a .collapse-next class to the triggering elements, then force their ul siblings to collapse with toggle set to false:

$(".collapse-next").closest('li').each(function(){
  if ($(this).hasClass('active')) {
    // pop up active menu items
    $(this).children("ul").collapse('show');
  } else {
    // just make it collapsible but don't expand
    $(this).children("ul").collapse({ toggle: false });
  }
});

This is for actually toggling the menu state:

$('.collapse-next').click(function(e){
  e.preventDefault();
  $(this).parent().next().collapse('toggle');
});

It seems that using data- attributes is a somewhat more modern and cleaner approach, but for old browsers working with classes and jQuery seems to do the job as well.

3
  • Thanks for pointing out this issue with IE9. I suspect it's a bug with Bootstrap, since the problem is not that toggle() is not called, but rather that when the Collapse plugin is uninitialized toggle() gets called twice. Anyway, I updated my answer in case you'd like to see how I'd deal with it, keeping with the data attributes style.
    – merv
    Mar 21, 2013 at 20:47
  • Hmmm...after looking back over the OP I just realized that your solution isn't viable since the whole point is to deal with dynamically added elements. Your current code assumes the elements are already on the page. I'll have to change my IE workaround too.
    – merv
    Mar 21, 2013 at 20:53
  • Oh, see I didn't even notice that, since my situation was about a menu whose creation I couldn't control, but your solution had worked fine in anything non-IE. But of course you're right.
    – slhck
    Mar 21, 2013 at 20:56
3

Yes, you can do it easily! 😎

Just add the following code to your scripts and enjoy: 😃

$('body').on('click','[data-toggle="collapse"][data-mytarget^="$("]',function(){
     eval($(this).data('mytarget')).collapse('toggle');
});

Now every where in your code you can set the target of collapse by a fully dynamic jQuery command inside data-mytarget.

Now use it like it:

<a data-toggle="collapse" data-mytarget="$(this).parent().next()">Link</a>

or

<a data-toggle="collapse" data-mytarget="$('#TopMenuBar').closest('ul')">Link</a>

or

<a data-toggle="collapse" data-mytarget="[ EACH IDEAl JQUERY CODE OF YOU STARTED WITH $( ]">Link</a>

Demo:

$('body').on('click','[data-toggle="collapse"][data-mytarget^="$("]',function(){
     eval($(this).data('mytarget')).collapse('toggle');
});
a{
  padding:10px;
  cursor:pointer;
  margin:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle btn btn-info" data-toggle="collapse" data-mytarget="$(this).parent().next()">Collapse It</a>
    </div>
    <div id="collapseOne" class="accordion-body collapse ">
      <div class="accordion-inner">
        Generated Content... this is big and sometimes needs collapsing
      </div>
    </div>
</div>

I used data-mytarget instead of data-target. If you use data-target it works too but the jQuery library raise an error like this: Uncaught Error: Syntax error, unrecognized expression: $(this).parent().next().

So I defined my different property with data-mytarget name.

1
  • 1
    scalable, simple, and clean with a great explanation. This really should be the accepted answer Dec 15, 2020 at 5:03
2

I think the best approach would be to do this iterate all accordion-toggle elements and set their data-target attribute dynamically via jquery and after that place the code of accordion mentioned in bootstrap.

Example :

$(function(){
    $("a.accordion-toggle").each(function(index) {
        $(this).attr("data-target", "#" + $(this).parent().next().attr("id"));
    });

    // accoridon code
});

Hope this will help

1
  • This still requires me to generate meaningless but unique IDs for the accordion-body, but it sounds like this is a standard enough thing to be doing. Since I'm creating both the accordion body and the collapse toggle at the same time I don't even need to use a selector in this case (I know the ID of the next element, since I just made it up). If I were creating them at different times then I might need to use the code you've posted, so thanks!
    – Soverman
    Oct 9, 2012 at 18:31
0

TYPO3 FCE and Bootstrap Accordion

I am having some trouble with this issue too i am using it in TYPO3 for a customer who wants to be able to add an infinite number of elements to the accordion. So I created a Flexible Content Element and mapped the elements.

The idea with that data-toggle="collapse-next" did not work for me as expected as it did not close the open elements. I created a new javascript-function doing that please find the code here. Hopefully someone finds the stuff useful.

Javascript

$(document).on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function (e) {
  var $container = $(this).parents(".accordion");
  var $opencontainers = $container.find(".in");
  var $target = $(this).parent().next();
  $target.data('collapse') ? $target.collapse('toggle') : $target.collapse();
  $opencontainers.each(function() {$(this).collapse('toggle')});
})

HTML

<html>
    <div class="accordion">
        <div class="accordion-section">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse-next">
                        Collapsible Group Item #1
                    </a>
                </div>
                <div class="accordion-body collapse">
                    <div class="accordion-inner">
                        Anim pariatur cliche...
                    </div>
                </div>
            </div>
        </div>
    </div>
</html>
0

Here is an approach that avoids needing unique IDs and avoids a specific html structure.

This encloses each instance of the collapse trigger and target in a "section" of html. I like to use class selectors, especially for multiple instances. In this case, it avoids having to create artificial unique IDs.

Borrowing from @merv's excellent answer, I named the data-toggle collapse-section similar to his collapse-next, and added a data-section attribute. Instead of parent().next(), this looks up for a closest() section name, then down for the given target name. They can be siblings or any other level.

(I have a naming convention using "id..." as a prefix for class names that are used as jquery selectors, to avoid mixing with styling.)

HTML

<div class="accordion-group idCollapseSection">
  <div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse-section"
       data-section=".idCollapseSection" data-target=".idCollapseTarget">
      Generated Title
    </a>
  </div>
  <div>Any other html, at various depths.
    <div class="accordion-body collapse in idCollapseTarget">
      <div class="accordion-inner">
        Generated Content... this is big and sometimes needs collapsing
      </div>
    </div>
  </div>
</div>

JS

//------------------------------
// Bootstrap Collapse.
//------------------------------
// Extend collapse to contain trigger and target within an enclosing section.
$('body').on('click.collapse-section.data-api', '[data-toggle=collapse-section]', function (e) {
  var thisTrigger = $(this);
  var sectionSelector = thisTrigger.data("section");
  var targetSelector = thisTrigger.data("target");
  var target = thisTrigger.closest(sectionSelector).find(targetSelector);
  target.data('bs.collapse') ? target.collapse('toggle') : target.collapse();
});

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.