Clash Royale CLAN TAG

How do I use buttons to select different elements from my document?

I created a web page of my resume, which is organized by skills.

At the top of the page, I have three buttons in the navigation:

<p>Choose the type of experience you are interested in seeing:</p>
<button class="button-w" type="button">Writing/Editing Experience</button>
<button class="button-t" type="button">Teaching/Training Experience</button>
<button class="button-c" type="button">Current Experience</button>


I gave each corresponding section in the html document its own class. For example: to contain all my writing/editing experience.

Then I wrote jquery to remove/detach all the other sections but the writing/editing. See below. It works for the first button I click on. But the problem is, when I then click on the "teaching/training experience" button, because I have already removed that content when I clicked on the "writing/editing experience" button, I get nothing.

Here's what I have:

$(document).ready(function(){

$(".button-w").click(function(){
$("section, div").detach(".teaching, .current");

});

$(".button-t").click(function(){
$("section, div").detach(".writing, .current");
});

$(".button-c").click(function(){
$("section, div").detach(".writing, .teaching");
});
});


I think what I need is either:
--to use "show"/"hide" and add some kind of conditional statement so that if one is showing the others stuff is hiding for each button selection
OR
--to order the jquery so that when I click on each new button, it first restores my original content and then removes all but the selected sections.

Can you help?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.