Pure CSS and HTML Menu (with Submenu Items and Text)

Question

I am trying to create a pure CSS/HTML menu (NO JAVASCRIPT), and this is an example of the code: https://jsfiddle.net/1Lrr4fme/1/.

The intent is to have a help menu with text appearing when clicked. However, I am having extreme difficulty navigating how to adjust the CSS to allow each span to open/close independent of the main one.

I have tried a few different things, but I think I am missing something.

<style id="tutorial" type="text/css">

html { background: white }

body {
    font-family: sans-serif;
    position: relative;
}

body:before, body:after {
    content: "";
    display: table;
}

body:after { clear: both }

p { margin-bottom: 0rem }


article {
    margin-bottom: 3rem;
    position: relative;
}

article:before, article:after {
    content: "";
    display: table;
}

article:after { clear: both }

article section:first-of-type {

}

article section:last-of-type {
    display: none;
    visibility: hidden;
}

section {
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

[for="read_more"] {
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    text-align: center;
    padding: .65rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

[for="read_more"]:hover {
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
}

[for="read_more"] span:last-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ section {
    display: block;
    visibility: visible;
    width: 100%;
}

input[type=checkbox]:checked ~ figure { width: 100% }

input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
    display: block;
    visibility: visible;
}
</style>

    <article><input id="read_more" role="button" type="checkbox" /> <label for="read_more" onclick=""><span>Show Help</span><span>Hide Help</span></label>
<section>


<article><input id="read_more" role="button" type="checkbox" /> <label for="read_more" onclick=""><span>1. Entering New Contracts</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>

<article><input id="read_more" role="button" type="checkbox" /> <label for="read_more" onclick=""><span>2. Completing a Contract Review</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>

<article><input id="read_more" role="button" type="checkbox" /> <label for="read_more" onclick=""><span>3. Terminating Contracts</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>

<article><input id="read_more" role="button" type="checkbox" /> <label for="read_more" onclick=""><span>4. Calculated Contract Dates</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>
<p>TESTING ONE TWO THREE</p>
</section>
</article>

Answer 1

Your problem is that you are using the same id for every input field. The id should be unique to each field so that you can open and close the text related to that field.

You should use classes for styling and behaviour you want across all input fields such as highlighting and borders, and then have a different id for each field.

example html:

<article><input id="help_menu" role="button" type="checkbox" /> <label for="help_menu" class="checkbox_label" onclick=""><span>Show Help</span><span>Hide Help</span></label>
<section>


<article><input id="new_contract" role="button" type="checkbox" /> <label for="new_contract" class="checkbox_label" onclick=""><span>1. Entering New Contracts</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>

<article><input id="contract_review" role="button" type="checkbox" /> <label for="contract_review" class="checkbox_label" onclick=""><span>2. Completing a Contract Review</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>

<article><input id="terminate_contract" role="button" type="checkbox" /> <label for="terminate_contract" class="checkbox_label" onclick=""><span>3. Terminating Contracts</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>

<article><input id="contract_dates" role="button" type="checkbox" /> <label for="contract_dates" class="checkbox_label" onclick=""><span>4. Calculated Contract Dates</span><span>Hide Help</span></label>
<section>
<p>hi</p>
</section>
</article>
<p>TESTING ONE TWO THREE</p>
</section>
</article>

example css:

<style id="tutorial" type="text/css">

html { background: white }

body {
    font-family: sans-serif;
    position: relative;
}

body:before, body:after {
    content: "";
    display: table;
}

body:after { clear: both }

p { margin-bottom: 0rem }


article {
    margin-bottom: 3rem;
    position: relative;
}

article:before, article:after {
    content: "";
    display: table;
}

article:after { clear: both }

article section:first-of-type {

}

article section:last-of-type {
    display: none;
    visibility: hidden;
}

section {
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

label.checkbox_label {
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    text-align: center;
    padding: .65rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

label.checkbox_label:hover {
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
}

label.checkbox_label span:last-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ section {
    display: block;
    visibility: visible;
    width: 100%;
}

input[type=checkbox]:checked ~ figure { width: 100% }

input[type=checkbox]:checked ~ label.checkbox_label span:first-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ label.checkbox_label span:last-of-type {
    display: block;
    visibility: visible;
}
</style>

Fiddle: https://jsfiddle.net/8m2pr0ky/