It works for me and tested, $( “#accordion” ).accordion({ heightStyle: “content”, collapsible: true, active: false, activate: function( event, ui ) { if(!$.isEmptyObject(ui.newHeader.offset())) { $(‘html:not(:animated), body:not(:animated)’).animate({ scrollTop: ui.newHeader.offset().top }, ‘slow’); } } }); http://jsfiddle.net/ilyasnone/aqw613em/
You can animate the scroll by getting the top of the ‘target element’ and then calling animate on the body.. $(‘html, body’).animate({ scrollTop: $(“#target-element”).offset().top }, 1000); modifying it to be something like this will help you achieve what you are after $(‘.panel-collapse’).on(‘shown.bs.collapse’, function (e) { var $panel = $(this).closest(‘.panel’); $(‘html,body’).animate({ scrollTop: $panel.offset().top }, 500); }); … Read more
I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css: #ui-datepicker-div {display: none;} This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when … Read more
You can use first variable, I made an stackblitz, you can see here. You can do as this way: <mat-accordion class=”example-headers-align”> <mat-expansion-panel *ngFor=”let item of [1,2,3]; first as isFirst” [expanded]=”isFirst”> <mat-expansion-panel-header> <mat-panel-title> {{item}} </mat-panel-title> </mat-expansion-panel-header> {{item}} </mat-expansion-panel> </mat-accordion> You can see here the use of the *ngFor variables for more information.
As discussed in the jQuery UI forums, you should not use accordions for this. If you want something that looks and acts like an accordion, that is fine. Use their classes to style them, and implement whatever functionality you need. Then adding a button to open or close them all is pretty straightforward. Example HTML … Read more
autoHeight was deprecated in 1.9, and removed in 1.10. Use: $(‘#id’).accordion({heightStyle: ‘content’}); to auto size your inner div. UPDATE: I see that this is still quite an active post, so I decided to make sure my answer is still valid. It looks like this may no longer work in jQuery UI 1.11. It notes that … Read more
Here is an easy way to do it: Bootstrap 4 $(‘.accordion .btn-link’).on(‘click’, function(e) { if (!$(this).hasClass(‘collapsed’)) { e.stopPropagation(); } }); from @mr_joncollette in the comments Bootstrap 3 JsFiddle for Bootstrap 3. Code for Bootstrap 3: $(‘.panel-heading a’).on(‘click’,function(e){ if($(this).parents(‘.panel’).children(‘.panel-collapse’).hasClass(‘in’)){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the … Read more
Bootstrap 4 Use the data-parent=”” attribute on the collapse element (instead of the trigger element) <div id=”accordion”> <div class=”card”> <div class=”card-header”> <h5> <button class=”btn btn-link” data-toggle=”collapse” data-target=”#collapseOne”> Collapsible #1 trigger </button> </h5> </div> <div id=”collapseOne” class=”collapse show” data-parent=”#accordion”> <div class=”card-body”> Collapsible #1 element </div> </div> </div> … (more cards/collapsibles inside #accordion parent) </div> Bootstrap 3 … Read more
Use the not function instead: var lastOpenSite = $(this).siblings().not(‘.closedTab’); hasClass only tests whether an element has a class, not will remove elements from the selected set matching the provided selector.
you should use $(“#accordion”).accordion({ heightStyle: “content” }); It will set height according to your content. and will not use blank space as height.