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!
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, e.g.:
$("div.second_sidebar").sidebar('hide');
$("div.first_sidebar").sidebar('show');
Reference is here: https://semantic-ui.com/modules/sidebar.html#/usage