Bootstrap nested multi-collapse accordion, remove active state -


i have multi-collapse accordion , trying put multi-collapse accordion within 1 of panels.

when toggle panel , nested accordion appears, panels in active state.

i nested accordion not in active state (blue ‘ – ‘ ) have panels in gray color ‘ + ‘ icon visible.

here example code

thanks suggestions.

<div class="panel-group multi-collapse" id="accordion1">        <div class="panel panel-default">           <div class="panel-heading">             <div class="panel-title">               <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">news 1</a>             </div>           </div>           <div id="collapse1" class="panel-collapse collapse in">             <div class="panel-body">                  <!-- here nested accordion -->              <div class="panel-group multi-collapse" id="accordion2">                <div class="panel panel-default">                 <div class="panel-heading">                   <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapsenested1">                     news 1 heading                   </a></div>                 </div>                 <div id="collapsenested1" class="panel-collapse collapse">                   <div class="panel-body">                     news 1a text ...                   </div>                 </div>               </div>                <div class="panel panel-default">                 <div class="panel-heading">                   <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapsenested2">                     news 2 heading                   </a></div>                 </div>                 <div id="collapsenested2" class="panel-collapse collapse">                   <div class="panel-body">                     news 2a text ...                   </div>                 </div>               </div>                </div>              <!-- inner accordion ends here -->              </div>           </div>         </div>          <div class="panel panel-default">           <div class="panel-heading">             <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">news 2</a></div>           </div>           <div id="collapse2" class="panel-collapse collapse">             <div class="panel-body">                 news 2 text ...             </div>           </div>           </div>        </div> 

mark.. add > sing after active class in style.css line 2101 this

 /* line 1658, ../sass/_typography.scss */ .panel-group .panel.active > .panel-heading > .panel-title > a:after, .panel-group .panel.active > .panel-heading > .panel-title > a:hover:after {   display: none; } 

Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -