Rectangle 27 15

You can insert an accordion inside a dropdown using :

You'll need to add a few lines of JS to prevent Dropdown events to break Collapse ones.

<div class="dropdown dropdown-accordion" data-accordion="#accordion">
  <a data-toggle="dropdown" href="#" class="btn btn-primary">Dropdown trigger <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li>
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Unit 1
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
              <a href="#">Item a</a><br>
              <a href="#">Item b</a>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Unit 2
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              <a href="#">Item a</a><br>
              <a href="#">Item b</a><br>
              <a href="#">Item c</a>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
.dropdown-accordion .panel-heading {
  padding: 0;
}
.dropdown-accordion .panel-heading a {
  display: block;
  padding: 10px 15px;
}
// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('show.bs.dropdown', function (event) {
  var accordion = $(this).find($(this).data('accordion'));
  accordion.find('.panel-collapse.in').collapse('hide');
});

// Prevent dropdown to be closed when we click on an accordion link
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
  event.preventDefault();
  event.stopPropagation();
  $($(this).data('parent')).find('.panel-collapse.in').collapse('hide');
  $($(this).attr('href')).collapse('show');
})

when the accordion opens for the first time - it is fully expanded. after reopening it again - it is in collapsed mode. how to prevent the accordoin from expanding on the first open?

.find('.panel-collapse').collapse('hide')
.find('.panel-collapse.in').collapse('hide')

jquery ui - Twitter Bootstrap: How to create a dropdown button with an...

jquery-ui twitter-bootstrap twitter-bootstrap-3 jquery-ui-accordion
Rectangle 27 6

Solution posted by Sudhir worked for me except it had one minor issue: When you have more than one choosen control inside the div and you expand other choosen while there is one already expanded, the new one will fall behind the accordion. This is because the first dropdown sets the overflow to hidden after 2nd one is expanded. Here is the fix.

$(function () {
   fixChoosen();
});

function fixChoosen() {
   var els = jQuery(".chosen-select");
   els.on("chosen:showing_dropdown", function () {
      $(this).parents("div").css("overflow", "visible");
   });
   els.on("chosen:hiding_dropdown", function () {
      var $parent = $(this).parents("div");

      // See if we need to reset the overflow or not.
      var noOtherExpanded = $('.chosen-with-drop', $parent).length == 0;
      if (noOtherExpanded)
         $parent.css("overflow", "");
   });
}

I added a few more lines and made it work for me. Thank you +1

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 6

One solution based on the suggestions given on that page by PilotBob http://jsfiddle.net/8BAZY/6/

$(function() {
    var els = jQuery(".chzn-select");
    els.chosen({no_results_text: "No results matched"});
    els.on("liszt:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });
    els.on("liszt:hiding_dropdown", function () {
            $(this).parents("div").css("overflow", "");
        });
});

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 5

It's not elegant, but you can do it like this:

#collapseOne {
    overflow: hidden;
}
#collapseOne.in {
    overflow: visible;
}

This will make sure it gets clipped when collapsed, and visible when shown.

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 4

.collapse
overflow: hidden

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 3

Change chosen.min.css or chosen.css :

.chosen-container{position:relative;
.chosen-container{position: fixed;

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 3

I had a similar issue with the Chosen select getting a width of 0px when I was using it within a Bootstrap collapse element. This was easily fixed by adding width:100%!important; to the element .chosen-container in my CSS.

I had the same problem, but inside a bootstrap tab. Your solution works for me. Thanks.

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 1

.chosen-drop {
    z-index: 999999 !important;
}
.chzn-drop {
    z-index: 999999 !important;
}

This worked for me "chosen1.3" and "bootstrap3.1", this solution may need some considerations, but I did not face any issues. Please read more https://github.com/harvesthq/chosen/issues/86

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 2

.editWorkUnit
$('.editWorkUnit').click(function(e){
     e.stopPropagation();
})
.... your code

It's not working. Clicking on edit link is opening/closing the accordion content.

or the problem could be that the icon element has width or height equals 0 - check also this

can you give me a fiddle with the code - where you have included css/html/javascript

I see it's working on the codepan. I am generating all HTML via an ajax call. So I have to bind the click event with .on method. Can you please make this working with that. Here is the fiddle I tried. But it's not working.

twitter bootstrap - jQuery accordion exclude expand/collapse event for...

jquery twitter-bootstrap accordion collapse expand
Rectangle 27 24

You can very easily solve this by a cookie. There is a lot of simplified libraries, like https://github.com/carhartl/jquery-cookie as I use in the example below :

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

add the following code to a script section (#accordion2 refers to the modfied twitter bootstrap example, I list afterwards)

$(document).ready(function() {
    var last=$.cookie('activeAccordionGroup');
    if (last!=null) {
        //remove default collapse settings
        $("#accordion2 .collapse").removeClass('in');
        //show the last visible group
        $("#"+last).collapse("show");
    }
});

//when a group is shown, save it as the active accordion group
$("#accordion2").bind('shown', function() {
    var active=$("#accordion2 .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

And you are done! Here a modified version of the example at http://twitter.github.com/bootstrap/javascript.html#collapse with clickable links, when you go back - the last shown accordion group opens up automatically

<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">
        Link : <a href="http://google.com">google.com</a>
      </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">
        Link : <a href="http://stackoverflow.com">stackoverflow.com</a>
      </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">
        Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a>
      </div>
    </div>
  </div>
</div>

Thanks, I haven't tried it yet, but with your explanation and hearing the same advice from a friend I think this is the way to go.

the items must have an id, i forget to mention that

shown.bs.collapse

@MatsLindh, you are correct - this was a BS 2.x issue, two years after tagged with bootstrap-3 and the specific 3.x answer.

javascript - Retain Twitter Bootstrap Collapse state on Page refresh/N...

javascript jquery twitter-bootstrap twitter-bootstrap-3
Rectangle 27 24

You can very easily solve this by a cookie. There is a lot of simplified libraries, like https://github.com/carhartl/jquery-cookie as I use in the example below :

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

add the following code to a script section (#accordion2 refers to the modfied twitter bootstrap example, I list afterwards)

$(document).ready(function() {
    var last=$.cookie('activeAccordionGroup');
    if (last!=null) {
        //remove default collapse settings
        $("#accordion2 .collapse").removeClass('in');
        //show the last visible group
        $("#"+last).collapse("show");
    }
});

//when a group is shown, save it as the active accordion group
$("#accordion2").bind('shown', function() {
    var active=$("#accordion2 .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

And you are done! Here a modified version of the example at http://twitter.github.com/bootstrap/javascript.html#collapse with clickable links, when you go back - the last shown accordion group opens up automatically

<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">
        Link : <a href="http://google.com">google.com</a>
      </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">
        Link : <a href="http://stackoverflow.com">stackoverflow.com</a>
      </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">
        Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a>
      </div>
    </div>
  </div>
</div>

Thanks, I haven't tried it yet, but with your explanation and hearing the same advice from a friend I think this is the way to go.

the items must have an id, i forget to mention that

shown.bs.collapse

@MatsLindh, you are correct - this was a BS 2.x issue, two years after tagged with bootstrap-3 and the specific 3.x answer.

javascript - Retain Twitter Bootstrap Collapse state on Page refresh/N...

javascript jquery twitter-bootstrap twitter-bootstrap-3
Rectangle 27 143

Turns out that Evan Larsen has the best answer. Please upvote his answer (and/or select it as the correct answer) - it's brilliant.

Using Evan's trick, you can instantiate all tooltips with one line of code:

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

You will see that all tooltips in your long paragraph have working tooltips with just that one line.

In the jsFiddle example (link above), I also added a situation where one tooltip (by the Sign-In button) is ON by default. Also, the tooltip code is ADDED to the button in jQuery, not in the HTML markup.

Popovers do work the same as the tooltips:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

And there you have it! Success at last.

One of the biggest problems in figuring this stuff out was making bootstrap work with jsFiddle... Here's what you must do:

  • In jsFiddle, on left side, open the External Resources accordion dropdown
  • Now, open the "Frameworks & Extensions" accordion dropdown, and select jQuery 1.9.1 (or whichever...)

in the jsFiddle, why is trigger not surrounded by single quotes but placement is?

There is no good reason, I just missed it. But it seems to work. Perhaps single-word keys do not need the quotes -- sometimes they are not required -- nevertheless, I usually put them in.

Can you use that method in relativity to a specific container? Instantiating all tooltips or popovers within a specific container?

javascript - Bootstrap 3.0 Popovers and tooltips - Stack Overflow

javascript jquery css twitter-bootstrap
Rectangle 27 0

You can use all Bootstrap plugins only with the usage of the data- attributes without writing a single line of JavaScript.

So you can remove $('#accordion2').collapse() call from your javascript.

However you have to make sure that you use/generate the correct data- attributes, so a few thing needs to be changed in your HTML:

data-parent="#accordion"
data-parent="#accordion2"
id="accordion2"

Your accordion bodies should have unique id's so you need to generate them with the using of knockout $index():

<div data-bind="attr: {id: 'collapse'+$index()}" class="accordion-body collapse">

And you have to specify a css selector with data-target attributes on your collapse links to tell which element should be collapsed:

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
   href="#" data-bind="text: ProductSKUName, 
                       attr: {'data-target': '#collapse'+$index() }"></a>

Note that I've removed the in class from the line in my sample:

<div id="collapseOne" class="accordion-body collapse in">

jquery - Twitter bootstrap accordion not collapsing - Stack Overflow

jquery json twitter-bootstrap knockout.js
Rectangle 27 0

By preventing the clicks on the accordion heading links to bubble down we can keep the dropdown open:

Thank you for that example, but how would you have the toggle button somewhere else? - When I try to move the button outside the <div class="dropdown" id="menu1">, it opens the dropdown, but clicking again doesn't close it.

jquery - Combine Twitter Bootstrap components: Dropdown and Accordion ...

jquery twitter-bootstrap drop-down-menu
Rectangle 27 0

One solution based on the suggestions given on that page by PilotBob http://jsfiddle.net/8BAZY/6/

$(function() {
    var els = jQuery(".chzn-select");
    els.chosen({no_results_text: "No results matched"});
    els.on("liszt:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });
    els.on("liszt:hiding_dropdown", function () {
            $(this).parents("div").css("overflow", "");
        });
});

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 0

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});
$("#searchinput").change( function() {
    var filter = $(this).val();
    var list= $(".accordion .accordion-group");
    if(filter) {
        $(list).find(":not(:contains(" + filter + "))").filter( ".text-contrast" ).parent().parent().parent().hide();
        $(list).find(":not(:contains(" + filter + "))").filter( ".accordion-inner" ).parent().parent().hide();
        $(list).find(":contains(" + filter + ")").filter( ".text-contrast" ).parent().parent().parent().show();
        $(list).find(":contains(" + filter + ")").filter( ".accordion-inner" ).parent().parent().show();
    } else {
        $(list).show();
    }
    return false;
}).keyup( function() {

    $(this).change();
});

You can search in accordion content and accordion titles. search is also case free. Works in bootstrap.

Filter a twitter bootstrap accordion using jQuery plugin - Stack Overf...

jquery twitter-bootstrap
Rectangle 27 0

$("a.accordion-toggle[data-toggle='collapse']").on("click", function () {
    $("a[href='" + $(this).attr("href") + "']").toggleClass("collapsed");
});

jquery - Twitter Bootstrap - Multiple accordion buttons - Stack Overfl...

jquery html twitter-bootstrap accordion twitter-bootstrap-3
Rectangle 27 0

var tabsHeight = $('.accordion-heading').outerHeight() * $('.accordion-heading').length;
var height = $('#your_accordion_container').innerHeight() - tabsHeight;

$('.accordion-inner').height(height - 1);

I haven't figured out why I need to do - 1 yet but without it the .accordion-inner was too big.

Make sure to wrap this in a function and to call it every time the browser window gets resized. Also make sure that your .accordion-inner doesn't have any vertical padding or to remove that padding from the set height.

Will check it out and let you know. Thanks.

jquery - Twitter Bootstrap accordion full height panes - Stack Overflo...

jquery html5 css3 twitter-bootstrap
Rectangle 27 0

<div class="accordion-heading">
 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseOne"><i class="icon-home"></i> Heading <i class="icon-chevron-down"></i>   <i class="icon-edit"></i><i class="icon-trash"></i></a>
</div>

To pull the icons right(as per your comment) you can do following :

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseOne"><i class="icon-home"></i> Heading<span class="pull-right"><i class=" icon-chevron-up"></i> <i class="icon-edit "></i><i class="icon-trash"></i></span></a>

As you have mentioned in your comment that, your headings are of variable length ,put the span out of the a tag , see below:

<div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
        href="#collapseOne"><i class="icon-home"></i> Headinghjhkjhjkhkjhkjhkjhkjhkjhkjhjkhkjhjkhkjhjkhjk</a>
  <span class="ico-pull pull-right"><i class=" icon-chevron-up"></i>  <i class="icon-edit "></i><i class="icon-trash"></i>
            </span>
    </div>

Than use the following css :

.accordion-heading > a {
width:8em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.accordion-heading > span {
margin-right:20px;
margin-top:-28px;
}

okay. I will try to see. But i change the demo and came across another problem. Yes the text problem. If the text is continuous it doesn't respect the boundaries.

And also my a text (Heading in your case) is of variable width so to have a good look and feel I want all 3 icons on extreme right and if the text is more than certain length i will put something like Heading.... . Any idea regarding how it can be achieved

Yes you can use text-overflow:ellipsis for the heading so if the text is longer than expected the dots get visible .

in <div class="accordion-inner">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div> .It dosent respect the boundaries. Any ideas?

You will have to use text-overflow:ellipsis property , I have updated the jsfiddle for it . Plz check

jquery - How to align icons and labels in an accordion using Twitter B...

jquery html twitter-bootstrap