CSS 표시 숨기기 전용

Question

내 웹 사이트 디자인은 회사 내에 통합되어 있습니다. 기본적으로 그들은 내 웹 사이트를 내 정보와 로고로 재구성하고 있습니다. 그들은 어떤 HTML 파일을 바꾸기 위해 여분의 돈을 원합니다. 스타일 시트 .css 파일과 이미지에만 액세스 할 수 있습니다. 나는 사용자가 클릭 할 때까지 각 h3 아래의 내용을 숨기 싶습니다 :

나는 아래의 예제에 나와있는 h3와 CSS를 표시/숨기기 할 수 있습니다. 샘플 목적을 위해 제품 페이지에서 가져온 HTML을 단축했습니다.

<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

당신은 같은 것을 수행 할 수 있습니다

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