Inhalt standardmäßig als 'Versteckt' festlegen

Question

Ich möchte den folgenden Inhalt als standardmäßig ausgeblendet setzen. Der Code funktioniert einwandfrei, zeigt jedoch den gesamten Inhalt an, wenn Sie auf der Seite landen.

.show { 
 
    display: none; 
 
} 
 

 
.hide:focus+.show { 
 
    display: inline; 
 
} 
 

 
.hide:focus { 
 
    display: none; 
 
} 
 

 
.hide:focus~#list { 
 
    display: none; 
 
} 
 

 
@media print { 
 
    .hide, 
 
    .show { 
 
    display: none; 
 
    } 
 
}

<p>Click below to learn how to access LearnHub and the services available to employees.</p> 
 
<div> 
 
    <a href="#" class="hide">[hide]</a> 
 
    <a href="#" class="show">[show]</a> 
 
    <ol id="list"> 
 
    <p> 
 
     <h2>How to access LearnHub</h2> 
 
     <p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p> 
 
    </ol> 
 
</div>

Answer 1

Wenn Sie das Element mit der ID list wollen, unsichtbar sein, wenn die Seite geladen wird, wird ein Eintrag in die CSS hinzufügen, seine display Eigenschaft auf none einzustellen.

#list {display:none;} 

Sie werden auch die Gegensätze oder Ergänzungen von vielen der CSS-Regeln hinzufügen, müssen Sie zur Zeit an der richtigen Stelle, wie weiter unten im Snippet demonstriert:

#list { 
 
    display: none; 
 
} 
 
.hide { 
 
    display: none; 
 
} 
 
.show:focus+.hide { 
 
    display: inline; 
 
} 
 
.show:focus { 
 
    display: none; 
 
} 
 
.show:focus~#list { 
 
    display: inline; 
 
} 
 
.hide:focus+.show { 
 
    display: inline; 
 
} 
 
.hide:focus { 
 
    display: none; 
 
} 
 
.hide:focus~#list { 
 
    display: none; 
 
}

<div> 
 
    <a href="#" class="show">[show]</a> 
 
    <a href="#" class="hide">[hide]</a> 
 
    <ol id="list"> 
 
    <p> 
 
     <h2>How to access LearnHub</h2> 
 
     <p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p> 
 
    </ol> 
 
</div>