Fieldset #collapsible broken

I'm using Bootstrap theme and am finding that my collapsible fieldsets aren't working. I click on them but they just stay as they are. Is there a workaround short of upgrading my theme to the dev version?

thanks

I'm experiencing this problem in Drupal 7. I tried upgrading to the dev version of the theme but it broke my site. How can I apply the fix for this problem.

thanks

bump

ok - thanks for replying.

I did try that but it really messed up my site. Also, it didn't fix the issue with Collapsible fieldsets not expanding and collapsing.

any workarounds?

thanks

Using 7.x-3.1-beta1 and manually applying the updates from #10 I still find that drupals collapsible fieldsets are not working properly.
I tried to update to beta2 but so much broke that I needed to roll back and try just fix this component.

Here is the markup being output - clicking on the expand/collapse header does nothing. Does this look correct to you?

<fieldset class="collapsible group-test field-group-fieldset panel panel-default form-wrapper collapse-processed" id="bootstrap-panel">
          <legend class="panel-heading">
      <a href="#" class="panel-title fieldset-legend" data-toggle="collapse" data-target="#bootstrap-panel .collapse">
    <span class="fieldset-legend-prefix element-invisible">Hide</span>Test</a>
    </legend>
    
<div class="panel-collapse collapse fade in">
    <div class="panel-body">
     The content
    </div>
    </div>

  </fieldset>

Then I thought I should try with the latest 3.x dev of Bootstrap in a fresh local install of Drupal - I set this up and made a simple collapsed group on a node

It worked the first time I clicked the title and it opened the collapsed container and then closed when I clicked again and then would not reopen again.
I was able to replicate this a few times where only the first open and close works and then it stops responding.

Any thoughts?

Thanks for the response Mark and great work with this theme.

This site has actually been in development (so is not prod yet) and I think the only reason I updated it to beta1 was to be able to generate the sub theme with drush - didn't realize the pain it may cause as its been solid to work with up until this point.

On the fresh install, I simply added a group to the display settings of the article content type and put a few fields inside of it.
I then added some test content and when viewing the node I was able to open and close the fieldset once before it stopped responding.

I did try to fix/update my sub theme to work with beta2 but it felt like it was too quickly becoming a rabbit hole of broken things.

All the region templates seem to have been removed in Beta2 and the page variables I was loading into the regions were broken and I was told in a warning that the $page variable no longer exists for the region templates - I did some troubleshooting but was not able to figure out what had changed to break that.

So to fix my sub theme to work with beta2 - I should attempt this patch? https://www.drupal.org/comment/9009607#comment-9009607

Would downgrading to 3.0 stable be a better course to take?

Thanks for the clarifications Mark, that certainly helps me with getting my sub theme upgraded. I am going to attempt this again shortly.

That markup was , I believe, copied and pasted from the node display where the fieldset was defined on the "Manage Display" page so there was no manual injection or php snippet - just the normal node display.

I will report back here after the subtheme upgrade whether the fieldset collapsing still is or isn't working

Following your instructions, I was able to upgrade my subtheme correctly.

At first the fieldsets behaved exactly the same and opened and closed once fine before locking up.
I checked the jquery update setting and it was still at 1.7 - after updating the version to 1.9 the fieldsets opened and closed correctly again.

Thanks for you help with this issue and my upgrade - sorry that it ended up being something silly on my side.

I'm am using Bootstrap-3.1-beta2 with webform module and collapsible fields only works one time.

When the HTML is rendered appears like:

<div class="panel-collapse collapse fade in">

When I click to the collapsible fieldset works fine and it's collapsed:

<div class="panel-collapse fade collapse" style="height: 0px;">

When I click again to open the fieldset works and the HTML is converted as:

<div class="panel-collapse fade in" style="height: auto;">

See that the 'collapse' class has disappeared, so at this point you cannot collapse again the fieldset. The fieldset works but only the first time you collapse-open the fieldset.

Update Bootstrap css and js to 3.2.0 version.

@Plazik Yes! I can confirm that using Bootstrap 3.2 css/js it's working fine.

Its not working for me, because after I close and open once again, i can't close.
i figured out that somehow the 'in' class is not removed properly. I made a patch that fixes it, though I dont know it is the best place to remove the class.

Same issue here as mentionned by @Mau Palantír
Using:

• bootstrap theme 7.x-3.1-beta2+8-dev (commit e014953)
• boostrap library 3.2.0

Re-rolled patch to apply on last 7.x-3.x-dev version

I'm using jQuery 1.9 and the latest 7.x-3.x dev of bootstrap module.
I've tried bootstrap library 3.2.0 and the latest 3.3.4 and I'm getting the behavior described in #19 and #23 where the fieldset will expand one time, but subsequent clicks do nothing.

I also gave the patch in #24 a shot but it did not resolve the issue for me.

Maybe there has been a regression? Can anyone else reproduce?

I took a closer look and it seems like the problem is the data target looks for #theelementid > .collapse, but .collapse seems to be the class that bootstrap uses to hide the collapsible content (it's display:none), and the class gets removed in the process of toggling, so it can't work again after you've expanded it once.

I wrote a patch which changes .collapse to .panel-collapse as the target, and it's working great for me now.

Well it seemed like this was a continuance of the same issue, had relevant background in comment history, and potentially was not never fixed because I was not able to reproduce any circumstances where it ever worked given the previous suggestions.

To me, it seemed like a possibility that perhaps the collapsible fieldsets only seemed like they were working because because testers may have clicked on them once, saw activity, and assumed success - or something like that. Sometimes things are preemptively closed when folks stop following up. Perhaps I needed to read the history more thoroughly.

I've never posted on any issue with the bootstrap project before so I don't think I need to be told to stop re-opening things... I've tried to provide a rationale for this and it seems issues sometimes go from 'fixed' to 'active' for reasons like this, but everyone has their own way.

Anyway, apologies for the mix up and I will open a new one and see if we can get to the bottom of it.

No new issue after all - after some head scratching, it turns out I was simply looking at the base theme's settings for the Bootrap JS/CSS version by accident when I was actually using a sub-theme which apparently defaults to 3.0.2.

So the data target thing was a total red herring...and I was so sure there was a problem. Anyway...

Sorry about the chatter, carry on.

I'm very much confused about this whole thread...

I'm using the latest version of Drupal 7.38 with latest

http://ftp.drupal.org/files/projects/bootstrap-7.x-3.0.zip

Now July 7 2015

Can somebody point out the DEFINITE solution to this?

Some many thread answers...

What will actually work?

Thanks

@Bruno Vincent

To fix this issue just make sure you are using at least 7.x-3.1-beta2.

Go to yoursite.com/admin/appearance/settings/bootstrap

On the advanced tab set the version to 3.4

As a good measure do the same on your subtheme settings.

Now they will work

@BigEd
Sorry, but you posted a strange comment.

On mid of September 2015 there is no 3.4 version of Bootstrap (last one is 3.3.5). So, we definetly can't use 3.4 on the CDN settings of theme.

And 7.x-3.1-beta3 still not fixed this issue. The fieldsets became even worse: supposed to be collapsed by default here shows like opened and don't reacting to click at all. So we're still there :(

The problem in my case was with fieldsets provided by Field Group module. Despite on settings, panel was always open without possibility to click on it. I made some quick research and fixed it.

For case of Field Group fieldsets problem is in the bootstrap_preprocess_bootstrap_panel():

// Force grouped fieldsets to not be collapsible (for vertical tabs).
  if (!empty($element['#group'])) {
    $variables['collapsible'] = FALSE;
    $variables['collapsed'] = FALSE;
  }

This code just overlapping real collapsible state and all further logic just not runs. So adding it up again in our theme.

Quick fix for broken collapsible fieldset (bootstrap-7.x-3.1-beta3)

Just add the following code to template.php of your Bootstrap subtheme:

function bsub_preprocess_bootstrap_panel(&$variables) {
  $element = &$variables['element'];
  $attributes = &$variables['attributes'];

  if (!empty($element['#group']) && $element['#collapsible'] != $variables['collapsible']) {
    $variables['collapsible'] = TRUE;
    $variables['collapsed'] = TRUE;

    if (!isset($element['#id'])) {
      $element['#id'] = drupal_html_id('bootstrap-panel');
    }

    $attributes['id'] = $element['#id'];
    $variables['target'] = '#' . $element['#id'] . ' > .collapse';
  }
}

For me, i have to add this in order collapsible fieldset work with bootstrap :

/**
 * Implements hook_field_group_pre_render_alter().
 */
function MODULE_field_group_pre_render_alter(&$element, $group, & $form) {
  if($element['#type'] == 'fieldset' && !isset($element['#id'])){
    $element['#id'] = drupal_html_id('fieldset');
  }
}

Moreover, remove Drupal default collapsible javascript

/*
 * Implements of hook_js_alter
 */
function HOOK_js_alter(&$js) {
  unset($js['misc/collapse.js']);
}

I found that simply setting the Bootstrap SubTheme Bootstrap version to 3.3.5 seems to solve the collapsible fieldset issue - without additional modifications to template.php. I'm using Bootstrap-7.x-3.1-beta3 as a base.

If none of the above does the job there's still the manual approach:

jQuery(document).ready(function ($) {
    var divs=$('.views-widget').hide(); // Hide/close all containers that have this class name

    var collabel=$('.views-exposed-widget label').click(function () { // element with this class name will be clickable to collapse the containers
        collabel.not(this).removeClass('active')
        $(this).toggleClass('active')
        divs.not($(this).next()).slideUp() // makes sure only one container is expanded. Remove if you want to allow more than one open container
        $(this).next().slideToggle()
        return false; // Prevent the browser jump to the link anchor
    });
});

(Tested on Bootstrap-7.x-3.1-beta3 / Bootstrap 3.3.5 - source)

Edit: this method will collapse the item(s) again after a reload of the page, which may not be desirable. I could pull it off with the Collapsiblock module instead.

Bootstrap 7.x-3.4 with Bootstrap 3.3.5
Problem still exists. The fix in #34 worked for me!

Bootstrap 7.x-3.4 with Bootstrap 3.3.5, Drupal 7.41, Jquery set to 1.7 then also tried 1.10 - same problem. I noticed that the anchor tags used to toggle the collapsibles are not being output as anchors, just spans. Also noticed that the 3.4 version says it wants Jquery 2.1, but Jquery Update does not offer that version yet.
None of the fixes on this page worked for me.

I have the same issue. #34 does not work.

It is a bug of jquery update module for my case.
https://www.drupal.org/node/2695079#comment-11046745.
Apply this patch fix my issue.

@arthur_drupal
Where to put this?

/*
 * Implements of hook_js_alter
 */
function HOOK_js_alter(&$js) {
  unset($js['misc/collapse.js']);
}

@g089h515r806
That didn't fix for me. Maybe you did both that and this #34 patch?!

How is this Closed (fixed)?!

I am using bootstrap 7.x-3.5 with jsDelivered bootstrap 3.3.5 (also tried 3.3.6 with no luck), jQuery update to 1.10 and Alternate = Default (provided by Drupal)

See #2755911: Fieldsets in forms not rendered in bootstrap theme if you want to keep this closed..

I have a project where I just discovered this was an issue. After trying several of the aforementioned solutions, I was unsuccessful. For now, I am doing this:

jQuery(document).ready(function(){
  jQuery(".question").click(function(){
    jQuery(this).children(".fieldset-wrapper").toggle();
  });
});

The "question" class that I am targeting comes from the type of view I've built, a "Question" and "Answer" view that the user can toggle the answer on and off. You can edit your code as needed. It's maybe not the cleanest solution, but it works for me!

Guys, just to be clear, what is the result of this problem:

1. you dont have collapsible behaviour, or
2. you dont see the fieldset at all (i.e. is not in the HTML)?!

Cause I am having the second problem, and I am surprised such few people are reporting this..

Example:
Commerce Checkout don't get output at all!
Just switch theme and you see everything as normal..