Toggle Hide/show upon clicking a checkbox and hitting submit button javascript

Question

I am trying to use checkboxes and a submit button to toggle hide/show a section of my resume. I have two sections, education and work experience. I have the code to set up the checkboxes and submit button but I am not sure how to code what comes after it to make the checkboxes work. this is what I have:

<script>
    function validateCheckbox() {
        var checkbox = document.getElementsByName("c1");
        for (var i=0; i < checkbox.length; i++) {
            if (radios[i].checked) {
                return true;
            }
        }
        function myFunction() {
            var x = document.getElementById("workexperience");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

</script>

I want to toggle the visibility of an element by id in CSS and I want to have the information be hidden upon page load so that if a site visitor clicks on the checkbox that says work experience and then hits the submit button it will show the relevant section either education for one checkbox or work experience for the other.

Answer 1

HTML

<div id="wrapper">
    <div>
        <input type="radio"  name="resume" value="work-experience">
        <input type="radio" name="resume" value="education">
        <button type="button" id="view-resume">View</button>
    </div>
    <div id="work-experience" class="display-none">Work Experience</div>
    <div id="education" class="display-none">Education</div>
</div>

CSS

<style type="text/css">
    .display-none{
        display: none;
    }
</style>

JAVASCRIPT

<script type="text/javascript">
    document.getElementById('view-resume').addEventListener("click", function(){
        var resume = document.querySelector('input[name = "resume"]:checked').value;
        document.getElementById(resume).style.display = 'block';
        if(resume == 'work-experience'){
             document.getElementById('education').style.display = 'none';
        }else{
             document.getElementById('work-experience').style.display = 'none';
        }
    });
</script>