Databases
StackOverflow2013
Postsdbo
POUsing bootstrap scrollspy for a div with collapse, to an affixed sidebar
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing bootstrap scrollspy for a div with collapse, to an affixed sidebar
    text
    copied!<p>I have this code as the layout of the page. The span9 div cotains sections that should apply the scrollspy. Each section is a set of collapsible divs that contains the actual content. The span3 div is the affixed sidebar and must highlight the correct item using the scrollspy.</p> <pre><code>&lt;div class="span3 module-sidebar"&gt; &lt;ul id="sidebar" data-spy="affix" data-offset="250" data-offset-bottom="0" class="nav nav-list bs-docs-sidenav affix"&gt; &lt;li&gt; &lt;a href="#module1"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;Module1 Name&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="span9" data-spy="scroll" data-target="#sidebar"&gt; &lt;section id="module1"&gt; &lt;div class="page-header"&gt; &lt;h1&gt;Module1 Name&lt;/h1&gt; &lt;/div&gt; &lt;div class="bs-docs-example"&gt; &lt;div class="accordion" id="accordion2"&gt; &lt;div class="accordion-group"&gt; &lt;div class="accordion-heading"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#function1"&gt;Function1 Name&lt;/a&gt; &lt;/div&gt; &lt;div id="function1" class="accordion-body collapse in"&gt; &lt;div class="accordion-inner"&gt; &lt;h3&gt;Topic1 Name&lt;/h3&gt; &lt;p&gt;Topic1 Desc&lt;/p&gt; &lt;h4&gt;SubTopic1 Name&lt;/h4&gt; &lt;p&gt;SubTopic1 Desc&lt;/p&gt; &lt;h4&gt;&lt;img src="../assets/img/manuals/module1/function1/step1.png"/&gt;&lt;/h4&gt; &lt;p&gt;Step1 Desc&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/div&gt; </code></pre> <p>The problem is that when i collapse the div to show the content, the scrollspy won't recognize the newly occupied space by that collapsible div. and thus highlights the next items in the sidebar when I scroll through the content of that collapsible div.</p> <p>What i want is for the scrollspy to 'see' the space when the collapsible div is expanded. Any help would really be appreciated. Click <a href="http://jsfiddle.net/mark_kenneth/2gpKf/17/" rel="nofollow">here</a> for the fiddle.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload