CODEWITHSUNDEEP
javascriptjquerysemantic-uisemantic-markup
user3784251
user3784251

Reputation: 520

Change the menu sidebar based on the menu item selected - Semantic UI & JQuery

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!

Upvotes: 3

Views: 436

Answers (1)

ph0enix
ph0enix

Reputation: 774

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

Upvotes: 1

Related Questions