Sidebar Collapsible Menu

  • Hello!

    I’m currently building a sidebar menu that will be displayed on all of our FAQ pages.

    I initially created a custom menu that would collapse utilizing JS(jQuery). Since there are currently 36 different FAQ pages, possibly more in the future, I didn’t want a static menu that would cause issues down the line. For example…

    1. Each subcategory, and the specific FAQ page being displayed would have an ‘active’ class. This helps the viewer see what page they’re reading and in what section within the larger FAQ sidebar menu. Adding the ‘active’ class to the appropriate page/category for all 36 is not only time consuming, but additional pages added at a later time would require me to change the custom HTML sidebar menu for all pages. (The custom HTML was being added to each page individually, changing the ‘active’ class where appropriate.)
    2. Including a custom HTML widget with the jquery code, that would be added to each FAQ page seemed like a better option. However, I’m not sure how I can specify the current FAQ page/category if I’m using the same code within the widget for all pages.

    So after that hurdle, I decided to just create a normal sidebar that can be displayed on all FAQ pages. However, now that all 36 pages are added to the menu, it’s rather long. In fact, the menu extends past most of the pages content. It looks pretty bad in my opinion. That is what led me here. I’m trying to figure out a way to have that sidebar menu collapse. I realize this does not solve the issue of actively displaying the current page and category but I want to get this working first, then iterate.

    If anyone can help, or suggest a plugin to use for the scenario I’d greatly appreciate it!

    -Pete

    • This topic was modified 5 years, 1 month ago by peterchic.
    • This topic was modified 5 years, 1 month ago by peterchic.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Tried to see if I could delete my post – I may be out of my league here…

    Have you considered using submenus – this would possibly solve the issue and give users better navigability on your website. The main website seems to have that set up nicely.

    • This reply was modified 5 years, 1 month ago by rajuk1970. Reason: last line
    • This reply was modified 5 years, 1 month ago by rajuk1970.
    Thread Starter peterchic

    (@peterchic)

    Hey @rajuk1970 . Thanks for the reply.

    As of now the entire menu is broken up into 4 sections. Under each section there are a range of topics that pertain to the section. I did arrange the topics under the sections within the menu. If this FAQ menu were running across the top, horizontally, I believe there would be the dropdown functionality. There just seems to be limitation with sidebar menus for some reason.

    Let me know if that’s what you meant.

    Thanks!
    Pete

    Moderator bcworkz

    (@bcworkz)

    You could use jQuery’s Accordion module to let users expand/collapse various elements in any HTML structure. Accordion can be invoked in a way that expands a certain section by default. You would need some JS code that determines the current page and then invokes the module with the related section expanded. Thus there needs to be some way to relate the current page to specific elements.

    Each page could have a brief, distinct inline script assigning the element to be expanded value to a common variable so your JS script knows which element to expand.

    Thread Starter peterchic

    (@peterchic)

    Hey @bcworkz ,

    That was my train of thought as well, but got stuck on that same issue. So going this route would allow each page to be displayed properly (based on the URL pulled by the JS code).

    So as I think this out, let me know if it makes sense to you…

    I’d have the custom HTML code widget added to the appropriate sidebar menu. This will allow that menu code to be created once and displayed on all pages. This also removes the issue that I explained earlier about additional pages causing me to change all the menus that would be located on each individual page.

    So at this point, each page would then have to have a script that speaks with the JS to properly expand/highlight the correct spot on the sidebar.

    My question for that is; where should this JS/jquery code live? On each page? or Can I include the JS in one spot and then just add a jquery script on each FAQ page?

    Hope that makes sense!

    -Pete

    Moderator bcworkz

    (@bcworkz)

    Most of the script can be in an external file which is conditionally enqueued only for FAQ pages. Enqueue from a callback hooked to “wp_enqueue_scripts” action. Be sure to specify ['jquery-ui-accordion'] as a dependency in your wp_enqueue_script() call.

    The one liner telling the external script what the current FAQ is should be output as inline script from the FAQ’s template.

    Come to think of it, the script to initialize accordion isn’t very extensive. You could simply conditionally enqueue “jquery-ui-accordion” itself and output the initialization code inline from the template.

    Thread Starter peterchic

    (@peterchic)

    Ok, so this became slightly confusing for me.

    My first question would be ‘where do I input this code?’

    After some quick research, it seems like I should add this to the themes functions.php file.

    Following this persons video: here

    To solve the issue of setting an active class, I think this would work. What do you think? setting active class

    Moderator bcworkz

    (@bcworkz)

    I don’t have patience for videos, but the title looks like it applies. If they are enqueuing ‘jquery-ui-accordion’ from a callback to “wp_enqueue_scripts” action in code added to functions.php, then that is correct.

    With accordion, you wouldn’t set a class but initialize accordion with the “active” argument, passing the offset into the the list of items which should be expanded. A similar concept could be used to find the right element and initialize accordion instead of setting a class.

    It’d be better if jQuery could know the offset ahead of time, determined server side. Client side changes to the UI during page load can be a little clunky. In this case it’ll likely be fine, but I prefer doing things server side when possible. If you are more familiar with JS than PHP, you’ll likely prefer a client side approach.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Sidebar Collapsible Menu’ is closed to new replies.