CSS显示仅隐藏 [英] CSS Show Hide Only

问题描述

我的网站的设计融入公司内部。基本上他们是用我的信息和标志重塑他们的网站。他们需要额外的钱来更改任何HTML文件。我只能访问样式表.css文件和图像。

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.

我可以使用 h3 在下面的示例中列出：
我想隐藏每个 h3 下的内容，直到用户点击它。我缩短了从产品页面中提取的HTMl，以便进行示例。

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>

推荐答案

您可以这样做：

/* 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;}

这篇关于CSS显示仅隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！