Maintain expanded sidebar navigation when page first loads

Question

Maintain expanded sidebar navigation when page first loads

Below is a Jquery script that I haven't used before, and don't quite understand:

$(document).ready(function () {
    $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();
        $(this).toggleClass("Treeviewcollapse Treeviewexpand");
        $(this).closest('li').children('ul').slideToggle();
    });
});

This script controls the expansion and collapse of a tree menu in ASP.net mvc 5.

The script is located in ~/Scripts/Treeview.js and called from the ASP.NET mvc _Layout page.

However, when clicking a link on the tree menu to open a new content page, it collapses the tree menu. Is there a way to keep the tree menu open throughout page clicks?

More information can be found here:

jquery css asp.net-mvc

Answer 1

Answer №1

There are numerous potential solutions available for this issue.

The main challenge is that Javascript doesn't retain its state, such as variables or DOM settings, between page refreshes. While there are various methods to make Javascript data persist across pageloads, given your current comfort level with jQuery scripting, it may be more efficient to address this primarily from the server side.

Although I'm not well-versed in ASP.net MVC 5, if you can retrieve details regarding the active page where the navigation menu is established, you can leverage this information to designate the appropriate menu item for expansion by adding the "Treeviewexpand" class.

Subsequently, update your jQuery code as follows:

$(document).ready(function () {
    $(".treeview li>ul").each(function(){
        if(!$(this).hasClass('Treeviewexpand')){
            $(this).css('display', 'none'); // Conceal all 2-level ul elements
        }
    });
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();
        $(this).toggleClass("Treeviewcollapse Treeviewexpand");
        $(this).closest('li').children('ul').slideToggle();
    });
});

For a live demonstration, refer to the example provided at: https://jsfiddle.net/1xjr1ndf/

Answer 2

There are numerous potential solutions available for this issue.

The main challenge is that Javascript doesn't retain its state, such as variables or DOM settings, between page refreshes. While there are various methods to make Javascript data persist across pageloads, given your current comfort level with jQuery scripting, it may be more efficient to address this primarily from the server side.

Although I'm not well-versed in ASP.net MVC 5, if you can retrieve details regarding the active page where the navigation menu is established, you can leverage this information to designate the appropriate menu item for expansion by adding the "Treeviewexpand" class.

Subsequently, update your jQuery code as follows:

$(document).ready(function () {
    $(".treeview li>ul").each(function(){
        if(!$(this).hasClass('Treeviewexpand')){
            $(this).css('display', 'none'); // Conceal all 2-level ul elements
        }
    });
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();
        $(this).toggleClass("Treeviewcollapse Treeviewexpand");
        $(this).closest('li').children('ul').slideToggle();
    });
});

For a live demonstration, refer to the example provided at: https://jsfiddle.net/1xjr1ndf/

Answer 3

Answer №2

One way to save the state of a tree menu is by utilizing HTML5's local storage feature.

Here is an example implementation:

$(document).ready(function () {
    var treeState = localStorage.getItem('treeState');
    var treeClass = treeState ? treeState : 'Treeviewcollapse';

    $(".Treeviewcollapsible").addClass(treeClass);

    $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();   
        
        $(this).closest('li').children('ul').slideToggle();

        if ($(this).hasClass('Treeviewcollapse')) {
          $(this).removeClass('Treeviewcollapse').addClass('Treeviewexpand');
          localStorage.setItem('treeState', 'Treeviewexpand');
        } else {
          $(this).removeClass('Treeviewexpand').addClass('Treeviewcollapse');
          localStorage.setItem('treeState', 'Treeviewcollapse');
        }
    });
});

If you have multiple items in the tree that need to be expanded, you can modify the approach to store the selector and its expansion state rather than just the class.

Answer 4

One way to save the state of a tree menu is by utilizing HTML5's local storage feature.

Here is an example implementation:

$(document).ready(function () {
    var treeState = localStorage.getItem('treeState');
    var treeClass = treeState ? treeState : 'Treeviewcollapse';

    $(".Treeviewcollapsible").addClass(treeClass);

    $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();   
        
        $(this).closest('li').children('ul').slideToggle();

        if ($(this).hasClass('Treeviewcollapse')) {
          $(this).removeClass('Treeviewcollapse').addClass('Treeviewexpand');
          localStorage.setItem('treeState', 'Treeviewexpand');
        } else {
          $(this).removeClass('Treeviewexpand').addClass('Treeviewcollapse');
          localStorage.setItem('treeState', 'Treeviewcollapse');
        }
    });
});

If you have multiple items in the tree that need to be expanded, you can modify the approach to store the selector and its expansion state rather than just the class.

Answer 5

Answer №3

Customized treeview expanding based on selected radio button using jQuery versions 3.4, 3.6, and more. Adjust selectors carefully, considering case sensitivity (e.g., "UL") or including the ".treeview" class when necessary.

$("input[type='radio']").each(
    function(){
        if(this.checked)
            $(this).parents("UL").each(
                function(){
                    this.style["display"] = "block";
                }
            )
    }
);

Answer 6

Customized treeview expanding based on selected radio button using jQuery versions 3.4, 3.6, and more. Adjust selectors carefully, considering case sensitivity (e.g., "UL") or including the ".treeview" class when necessary.

$("input[type='radio']").each(
    function(){
        if(this.checked)
            $(this).parents("UL").each(
                function(){
                    this.style["display"] = "block";
                }
            )
    }
);

Maintain expanded sidebar navigation when page first loads

Answer №1

Answer №2

Answer №3

Similar questions

Switching images using jQuery when hovering over navigation bar items

Can we display just 2 pricing tables instead of 4 and align them in the center?

Bootstrap 4 row mysteriously shatters apart

Maintain and refresh the chosen option in the dropdown menu

What comes next after a CSS transformation?

The jQuery issue is causing a problem with the Bootstrap dropdown in my Node application

the border only partially encasing the div

Aligning two buttons within a div using Bootstrap

Do you think there is an excessive amount of code cluttering up my view in CakePHP using the MVC design

CSS Padding Hover Transition solution for Eliminating Flickering Text issue

Trouble with attaching a click event to a jQuery datepicker

Steps for splitting a numbered list and adding an image above each item:

Struggling to locate an element with Selenium and Python?

Does jQuery have a concept of a "true height"?

Encountering an issue when trying to assign a lengthy query to a variable in ASP.NET MVC RAZOR

Utilizing form selectors in non-traditional elements

Utilizing inline styles with the asset pipeline feature in Rails

Broken responsive carousel using bootstrap

Does text alignment apply to one tag but not the other?

Tips for creating a responsive table using class naming conventions