Button changed when pressed and toggle visibility

Hi all, I want to have two buttons on my website, which toggles visibility.


Left button = not activated
Right button = activated (hover in this case to show what I want) and show the “invisible” content (toggle)

Standard I want them only outlined. When pressed they have to show the invisible text (I know already how to do this).

My wish: Show both buttons only outlined and fill them when pressed. Also toggle both buttons so only ONE can be active. Also if you push the active button, it will be deactivated again (also the visibility toggle needs to be set accordingly of course).

I tried something with javascript on fiddle, see http://jsfiddle.net/MNLEU/yn2pm8g5/
(startpage.com -google- was my friend).

Can someone help me with a solution for this? I also tried to make two buttons. One outlined and one filled and toggle visibility, but it was a visual disaster on my website preview. Maybe I don’t need the “button” bric, but another solution is available. (remember I am not a coder and do everything with common sense and trial-and-error).

Have a look at this example. Looks like it might be adaptable.

Thanks for your answer. Unfortunately it does the same as I showed on jsfiddle, although with 3 buttons. The toggle buttons is working, but after selecting I can’t toggle both off. (Or it would need a 3rd button with “close all”, which isn’t the best solution in my opinion.