I need a toggle behavior but not exactly the way it is by default.
I have a left and right column. In the left column is a menu. On the right is just a content section. Each menu is supposed to make the content area fill with some data. When another menu item is clicked, the previous data goes away and new data replaces it.
Also, on page load, the top menu and content should already be visible. There should always be one menu item and content visible.
The default behavior of toggle is just turning a class on and off, which is fine for a ".hidden" class. But if I click multiple different menu items, each data block appears on top of the others and they stack up.
I need the previous block to toggle off when the new one toggles on.
Also the user should not be able to toggle every content block off. In other words, click again on the menu of the current one shouldn't do anything since it's already visible.
I doubt this can be done with default Toggle behavior so I'm wondering what technique I could do to accomplish this.