bootstrap collapse, jquery active

Question

Hi have made a collapsible accordion menu with the bootstrap javascript plugin, the menu works great but I would like to know if it is possible to use the jquery active class to keep the menu opened at its current position when loading a new page from the menu. I am just learning javascript and therefore am not sure exactly how I would go about doing this.

This is some of the html of my menu:

     <div id="nav">                     
         <div id="accordion">           
             <div class="heading">  
             <a class="accordion-toggle nav-main-item" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">About</a>
             </div><!--ends heading--> 
             <div id="collapseOne" class="collapse">
                 <ul>
                 <li><a class="nav-sub-item" href="about.html">me</a></li>
                 <li><a class="nav-sub-item" href="articles.html">articles</a></li>
            </ul>
             </div><!--ends collapseOne-->
         </div>
     </div>

"me" and "articles" open up when clicking on "about", both of those link to a new page. I would like the menu to stay open when clicking on those links.

tleef · Accepted Answer · 2013-09-25 21:46:55Z

1

Adding the in class on your collapseOne will make the accordion open by default.

<div id="nav">
    <div id="accordion">
        <div class="heading"> <a id="about" class="accordion-toggle nav-main-item" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">About</a>

        </div>
        <!--ends heading-->
        <div id="collapseOne" class="collapse">
            <ul>
                <li><a class="nav-sub-item" href="about.html">me</a>

                </li>
                <li><a class="nav-sub-item" href="articles.html">articles</a>

                </li>
            </ul>
        </div>
        <!--ends collapseOne-->
    </div>
</div>

<script>
    $(function() {
       $('#collapseOne').addClass('in'); 
    });
</script>

Example in JSFiddle

http://jsfiddle.net/zw3ZU/

edited Sep 25, 2013 at 21:46

answered Sep 24, 2013 at 21:58

tleef

3,6241 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fred Over a year ago

Using the in class would work but the nav is being called from an external html file, its not repeated in all my html pages. Could there be a way to add the in class to the menu when loading the page?

tleef Over a year ago

I updated my answer to add the in class programatically when the page loads

Collectives™ on Stack Overflow

bootstrap collapse, jquery active

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related