CSS Show Hide Only

Question

The design of my website is integrated within their company. Basically they are rebranding their website with my information and logo. They want extra money to change any HTML files. I only have access to the stylesheets .css files and images.

Can I make a css show/hide with the h3 listed in the sample below: I would like to hide the content under each h3 until the user clicks on it. I have shortened the HTMl I pulled from the product page for sample purposes.

<div id="product_text_content">
    <p>Digital Brochures come in full color on 1 or 2 sides. Available options: 8 paper stocks, 5 sizes, and 3 coatings.</p>
     <h3 class="gray">SIZE:</h3>

    <ol>
        <li>8.5" x 11"</li>
        <li>8.5" x 14"</li>
        <li>11" x 17"</li>
        <li>11.5" x 17.5"</li>
        <li>5.5" x 8.5"</li>
    </ol>
     <h3 class="gray">PAPER OPTIONS:</h3>

    <ol>
        <li>100# Gloss Text available</li>
        <li>95# Gloss Cover available</li>
        <li>80# Uncoated Offset Smooth Text</li>
        <li>100# Uncoated Cover available</li>
        <li>70# White Linen Text</li>
        <li>100# White Linen Cover</li>
    </ol>
     <h3 class="gray">COATING OPTIONS:</h3>

    <ol>
        <li>No Coating available on all stocks.</li>
    </ol>
     <h3 class="gray">FOLDING OPTIONS:</h3>

    <ol>
        <li>Tri-Fold</li>
        <li>Z-Fold</li>
        <li>... and more</li>
    </ol>
     <h3>Custom Estimate:</h3>

    <p>For custom orders or quantities not listed for your desired product, please <a href="/account/estimate">click here</a> for a custom estimate.</p>
     <h3>Explanation of Turnaround Time</h3>

    <p>Here's a quick chart to explain turnaround times:</p>
    <img src="/img/products/turnaround.png" height="375" width="380">
    <p>Please note that turnaround time does not include shipping or mailing time. You may select from available production turnaround times and your preferred shipping time as you place your order.</p>
    <p>Turnaround times begin when the proof is approved. All times are based on standard business days Monday through Friday excluding federal holidays. For orders shipping to the <font color="blue">blue zone</font>, please use the Eastern time zone (New York). For orders shipping to the <font color="red">red zone</font>, please use the Pacific time zone (California). Please see the below map:</p>
    <img src="/img/products/map.jpg" height="155" width="300">
    <p>Our products are the same great quality for every turnaround time we offer.</p>
</div>

Answer 1

You can do something like this:

/* Make H3 look like a link. */
h3 {cursor: pointer;}
/* Hide all the OLs initially */
h3 + ol {display: none;}
/* Show when the user hovers H3 */
h3:hover + ol {display: block;}
/* Or show when he clicks and holds */
h3:active + ol {display: block;}