CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapaccordion
fred
fred

Reputation: 485

bootstrap collapse, jquery active

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.

Upvotes: 0

Views: 2245

Answers (1)

tleef
tleef

Reputation: 3594

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/

Upvotes: 1

Related Questions