Make menu element disappear by the clicking the menu button

I have a web page at http://form.kr/q/swap18/

The page does like the following.

Adding to the above, I like to make it like the following.

The usual technique is to first hide the menu elements before showing the selected one.
The rest of it should be a simple task of using toggle for the selected menu element.

I am afraid that I cannot make it hide first and make the simple task of toggle to work although I read your quote above.

By that logic it means that once you have clicked all 3 buttons there will be no buttons left so you can’t hide the last currently displayed content and you cannot select any of the other items because there are no buttons left. You will be stuck with no buttons and the content associated with the last button still displayed?

I think you will need to explain more explicitly your logic.

I think I need 6 menuS functioning like the follow.

By the way, http://form.kr/q/swap21 is the newest version of http://form.kr/q/swap18 .

It sounds to me as though you simply want each button to toggle the display of the relevant element.

E.g click showDiv1 and div1 appears and then the text in the button changes to hideDiv1. If you click the button again then it hides div1 and the text in the button goes back to saying showdiv1.

Is that a correct interpretation?

Yes, that’s true.

Yes, that’s correct.

By the way, the newest version for toggling is http://form.kr/q/swap25/

Assuming I’ve understood the question then something like this would seem to be what you are asking for.

There are changes to CSS, html and JS.

The JS is pretty simplistic and probably needs tidying up but seems to do the job in hand.

Thank you very much. It works fantastic at http://form.kr/q/swap26/

I’ll do tidy up for my own use.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.