CODEWITHSUNDEEP
twitter-bootstrapmenunavbar
user2343800
user2343800

Reputation: 133

collapse menu nav stay open when clicked on bootstrap 3

I have this working: http://jsfiddle.net/JpJqD/2/

BUT would like to do this:

for example: if click on one of the links "Create User" and it lands on one of my pages in my site, the menu or nav collapses automatically. How do you set it for main header "Users" to stay open, NOT collapse? Please help. Thank you

<div class="panel panel-default">
    <div class="panel-heading">
        <h3>Navigation</h3>
    </div>

    <div id="sidebar" class="list-group"> 

        <a href="#" class="list-group-item active">
            <i class="icon-dashboard"></i> Dashboard
        </a>

        <a href="#users" class="list-group-item"  data-parent="#sidebar">
            <i class="icon-group"></i> Users
            <span class="badge bg_danger">0</span>
        </a>

        <div id="users" class="list-group subitem collapse">    

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Users
                <span class="badge bg_danger">0</span>
            </a>

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create User
            </a>

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create Group
            </a>

        </div>  

        <a href="#articles" class="list-group-item"  data-parent="#sidebar">
            <i class="icon-file-text"></i> Articles
            <span class="badge bg_danger">0</span>
        </a>

        <div id="articles" class="list-group subitem collapse"> 

            <a href="#" class="list-group-item bg_warning">
                <i class="icon-caret-right"></i> Articles
                <span class="badge bg_danger">0</span>
            </a>

            <a href="#" class="list-group-item">
                <i class="icon-caret-right"></i> Create Article
            </a>

        </div>

    </div>
</div>

$('#sidebar > a').on('click', function (e) {
    e.preventDefault();

    if(!$(this).hasClass("active")){
        var lastActive = $(this).closest("#sidebar").children(".active");
        lastActive.removeClass("active");
        lastActive.next('div').collapse('hide');
        $(this).addClass("active");
        $(this).next('div').collapse('show');
    }
});

Upvotes: 0

Views: 1999

Answers (1)

Trevor
Trevor

Reputation: 16116

What I think you need to do is add the ID of the parent div to the end of your link. e.g. url?link='users'

Then you can grab the link value from the url. The following link demonstrates how to accomplish this How can I get query string values in JavaScript?

Then once you grab the value from the url you can trigger the click when the page loads.

var link = 'users'; // or the value grabbed from the url
$('a[href="#'+link+'"').trigger('click');

Example

http://jsfiddle.net/trevordowdle/JpJqD/76/

Upvotes: 1

Related Questions