nesting the sub-categories

  • Orange search box: the categories + subcategories + sub-sub-categories begin to be a long list when I open the selector, is it possible, without js, make show only top categories by default and then I click on little arrows near the categories and can open sub-categories and so on? All this using only one selector, not many selectors

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

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

  • Hey @sacconi ,

    Yes it is possible to handle the above described scenario without JavaScript and achieve it with only CSS. You can modify the structure of the dropdown with HTML element tags <summary> and <details>. Using this you would be able to show more content only when user clicks on the specific category.

    Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

    Thread Starter sacconi

    (@sacconi)

    In my code category terms are ruled by $category inside a shortcode: https://pastebin.com/uHYfxULR , in this situation how can I insert html element tags? thank you

    Moderator bcworkz

    (@bcworkz)

    Your shortcode snippet is incomplete. It’s not clear what HTML the shortcode is to output.

    In any case, if you go with Eshaan’s suggestion of <summary> and <detail> elements, it cannot be in a <select><option> dropdown field like you have now. It’s also not a form element so you’d need to send the user selection through different means, which would involve JavaScript.

    To get the behavior you want in the current dropdown field, you’ll need to use JavaScript. I’m not sure how well this would work. It’d be difficult to discern a click that selects a top level element from a click meant to expand the element. And relying on a hover event to expand would not be mobile compatible. I suppose the expansion content could also contain the top level element again so clicking on that would be a selection. Clicking on the unexpanded element would not be a selection but only a request to expand/close the sub-elements. I think this could confuse users. It’s not the most elegant approach, but it’s all I can think of if you stay with a dropdown category list.

    So your shortcode would only output top level elements. You’d install JavaScript listeners on each of the elements. On click, the listener callback would insert the elements that users would click on to select. I’m not sure the browser will immediately display <option> elements added by script. I advise developing a minimal proof of concept test before spending a lot of time developing a full solution.

    Thread Starter sacconi

    (@sacconi)

    It seems to me a difficult task, since at the moment I dont have so many destinations, I keep my current system. I’ll be back on it in some months. Now I’d give the priority to this other topic: “Adding a variable to some PHP code with gettext”

    • This reply was modified 6 days, 23 hours ago by sacconi.
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Tags