根据所选的菜单项更改菜单侧栏 - Semantic UI和JQuery

Question

I'd like to use SemanticUI to display different sidebars based on selected menu

I've tried one way, but it doesn't seem to work. Codepen link

Here, i have 2 menu items for the sidebar, i need to show ' first_sidebar ' if i'm inside the menu ' First ', if i'm inside ' Second ', i need to show the ' second-sidebar '.

Thanks!

Answer 1

You are trying to show and hide sidebar as an ordinary HTML element with jQuery, using $("div.second_sidebar").hide() and $("div.first_sidebar").show() .

But, since sidebars are Semantic UI element that you initialized with .sidebar() method, you should use this same method to show and hide sidebars, eg:

$("div.second_sidebar").sidebar('hide');
$("div.first_sidebar").sidebar('show');

Reference is here: https://semantic-ui.com/modules/sidebar.html#/usage