Menu
I have unexpected page scrolling when try to collapse or expand elements of the accordion. Maybe I just doing something wrong with bootstrap grid system? Here is example of page:
How can I avoid this irritative effect?
jsfiddle available https://jsfiddle.net/Lfwvtyms/1/
<body> <!--default navbar here--> <main> <h1>Long long long long long long header header header header header header lng lasd lewq j</h1> <div class="container"> <div class="row"> <div class="col-xs-12"> <div id="task-list"> <div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group"> <div class="panel panel-default"> <div id="headingOne" role="tab" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">First list</a></h4></div> <div id="collapseOne" role="tabpanel" aria-labelledby="headingOne" class="panel-collapse collapse in"> <ul class="list-group"> <li class="list-group-item">Item1</li> <li class="list-group-item">Item2</li> <li class="list-group-item">Item3</li> </ul> </div> </div> <div class="panel panel-default"> <div id="headingTwo" role="tab" class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Another list</a></h4></div> <div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo" class="panel-collapse collapse in"> <ul class="list-group"> <li class="list-group-item">Item1</li> <li class="list-group-item">Item2</li> <li class="list-group-item">Item3</li> </ul> </div> </div> </div> </div> <div id="someDiv"> <div class="row"> <div class="col-xs-12"> <div id="dummy">Div with fixed height here</div> </div> </div> </div> </div> </div> </div> </main> <footer class="container-fluid">my footer here</footer> </body> 
528
Your child Accordion items aren't collapsing because you're setting data-parent to their own individual boxes. If you apply an ID of accordion-sub to . panel-body and then change your data-parent to match you'll achieve something functional. I followed your example and it works a treat!
Just add data-toggle="collapse" and a data-target to element, to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header. You can also expand or collapse the accordion items through external button click.
The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
I had same problem (jump to the top on click to the link which was triggering the collapse toggle) the href="#" was changed to href="javascript:void(0);" and it is working great (toggling collapse without any scrolling to the top)
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
