0

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');
    }
});
dan1st
  • 12,568
  • 8
  • 34
  • 67
user2343800
  • 133
  • 1
  • 4
  • 16

1 Answers1

1

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/

Community
  • 1
  • 1
Trevor
  • 16,080
  • 9
  • 52
  • 83
  • @user2343800 Can I get some feedback on my answer? Did that help you or are you still having issues getting it to work? – Trevor Dec 11 '13 at 23:21