È possibile mostrare e nascondere il testo utilizzando un collegamento con solo CSS, senza utilizzare affatto JavaScript?
Ad esempio: in questa pagina
Nota il collegamento "Altro". Quando fai clic su di esso, mostra il testo. Questo particolare esempio è JavaScript, ma non sono sicuro che possa essere fatto con CSS puro.
Risposte:
C'è l' <details>elemento , che non è ancora integrato in Edge:
<details>
<summary>more <!-- a bad summary --></summary>
<p>Some content</p>
</details>Non sono sicuro di quanto sia difficile applicare uno stile coerente su tutti i browser.
C'è un comune trucco per la casella di controllo (in cui la casella di controllo può essere nascosta e l'etichetta può essere abbinata a qualsiasi cosa):
#more:not(:checked) ~ #content {
display: none;
}<input id="more" type="checkbox" /> <label for="more">more</label>
<p id="content">Some content</p>ma non è sempre (forse mai? hmm) appropriato usarlo; di solito puoi semplicemente ripiegare sulla visualizzazione del contenuto quando JavaScript non riesce a caricare e avere il link "altro" ad esso.
C'è anche :target, ma probabilmente è ancora meno appropriato, poiché è più difficile da costruire nel meccanismo di chiusura.
#content {
display: none;
}
#content:target {
display: block;
}
#less {
display: none;
}
#content:target ~ #less {
display: block;
}<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>:checkedo :targetnon saresti mai appropriato. Esistono, dopotutto.
idrequisito, che lo rende più difficile da usare per le pagine dinamiche. Non è una buona ragione anche se IMO: questo modello di casella di controllo nascosto è piuttosto vecchio, non difficile da capire, e puoi semplicemente usare un hash come parte dell'ID in situazioni dinamiche.
:target, il contenuto scompare se ti colleghi da qualche altra parte. :checkedsignifica che non puoi collegarti all'interno dell'espansione e se nascondi la casella di controllo devi rendere l'etichetta attivabile da tastiera. Poiché affinché uno di questi funzioni il contenuto deve essere già presente, lo mostrerei per impostazione predefinita e utilizzerei JavaScript per fornire il miglioramento nella maggior parte dei casi.
Sì , questo è possibile con il puro CSS. Puoi fare clic su un elemento utilizzando l' :checkedattributo di una casella di controllo in combinazione con <label>l' forattributo di un elemento .
Poiché la casella di controllo può essere deselezionata , è possibile utilizzarla per attivare la visibilità semplicemente aggiungendola visibility: hiddena un elemento derivante da :checked(una volta che la casella di controllo viene nuovamente selezionata, questo pseudo-selettore non sarà valido e il selettore CSS non corrisponderà più al target).
Questo può essere esteso a un <label>con l'uso fordell'attributo, in modo da poter nascondere completamente la casella di controllo stessa e applicare direttamente il proprio stile al file <label>.
Quanto segue utilizza il combinatore fratello adiacente ( +) per attivare / disattivare la classe togglequando si <label>fa clic sull'elemento:
input[type="checkbox"] {
display: none; /* Hide the checkbox */
}
/* This is tied to the invisible checkbox */
label {
background-color: #4CAF50;
border: 2px solid black;
border-radius: 20px;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
display: inline-block;
margin-bottom: 20px;
cursor: pointer;
user-select: none;
}
/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
visibility: hidden;
}<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>Sì, puoi farlo facilmente usando solo CSS. Fare riferimento al codice seguente:
* {
box-sizing: border-box;
}
body {
background-color: #646464;
color: #fff;
}
header {
background-color: rgba(0, 0, 0, 0.5);
font-size: 1.5em;
text-align: center;
padding: 1em;
}
.panel-wrapper {
position: relative;
}
.btn {
color: #fff;
background: #000;
border-radius: 1.5em;
left: 30%;
padding: 1em;
text-decoration: none;
width: 40%;
}
.show,
.hide {
position: absolute;
bottom: -1em;
z-index: 100;
text-align: center;
}
.hide {
display: none;
}
.show:target {
display: none;
}
.show:target~.hide {
display: block;
}
.show:target~.panel {
max-height: 2000px;
}
.show:target~.fade {
margin-top: 0;
}
.panel {
position: relative;
margin: 2em auto;
width: 70%;
max-height: 100px;
overflow: hidden;
transition: max-height .5s ease;
}
.fade {
background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
height: 100px;
margin-top: -100px;
position: relative;
}<!DOCTYPE html>
<html lang='en' class=''>
<head>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>
<body>
<header>CSS Only: Show More</header>
<div class="panel-wrapper">
<a href="#show" class="show btn" id="show">Show Full Article</a>
<a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
<p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
fermentum nisi, vitae mattis neque vehicula vitae.</p>
<p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
<p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
<p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
<p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
<p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>
</div>
<!-- end panel -->
<div class="fade"></div>
</div>
<!-- end panel-wrapper -->
</body>
</html>È possibile nascondere una casella di controllo, ma consentire che venga selezionata / deselezionata tramite il suo <label>elemento associato .
A seconda che la casella di controllo sia selezionata o meno, è possibile nascondere / mostrare il testo aggiuntivo e persino modificare il testo dell'etichetta da "Altro" a "Meno".
Ho incluso alcuni dettagli aggiuntivi nel CSS in modo che le intenzioni di ciascuna definizione possano essere un po 'più chiare.
1. Con un pulsante "Altro" / "Meno":
.more-text, #more-checkbox { /* Hide the second paragraph and checkbox */
display: none;
}
input:checked ~ .more-text { /* Show the second paragraph when checked */
display: block;
}
.more-label::after { /* Label underline, hand cursor, color */
cursor: pointer;
text-decoration: underline;
color: #666;
}
input ~ .more-label::after { /* Set label text to "More" by default */
content: 'More';
}
input:checked ~ .more-label::after { /* Set label text to "Less" when checked */
content: 'Less';
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>
<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>
<p class="more-text">
Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>2. Con il pulsante "Altro" in alto e il pulsante "Meno" in basso:
.more-text, #more-checkbox, .less-label {
display: none;
}
.more-label, .less-label {
cursor: pointer;
text-decoration: underline;
color: #666;
}
input:checked ~ .more-text, input:checked ~ .less-label {
display: block;
}
input:checked ~ .more-label {
display: none;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>
<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>
<p class="more-text">
Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>
<label class="less-label" for="more-checkbox">Less</label>Tecnicamente parlando, è possibile attivare o disattivare la visibilità del testo in base a quando si fa clic su un pulsante o un collegamento, come mostrato di seguito:
.hidden-text {
display: none;
}
.toggle-text:focus + .hidden-text {
display: block;
}<p>
This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
<span class="hidden-text">Now I'm visible!!!</span>
</p>Detto questo, ti consiglio vivamente di familiarizzare con JavaScript poiché la soluzione che utilizza JavaScript per qualcosa di simile è molto più semplice e consente una maggiore flessibilità.
Sì, puoi farlo utilizzando solo HTML e CSS.
body { padding: 20px; }
div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }
label {
background-color: yellow;
box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
border-radius: 4px;
font-size: 16px;
display: inline-block;
padding: 2px 5px;
cursor: pointer;
}<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
Hello. This is some stuff.
</div>ora puoi nascondere / mostrare il testo usando solo i CSS! Se stai utilizzando l'immissione di testo e desideri mostrare / nascondere il testo in base allo stato della casella di immissione, puoi utilizzare la nuova pseudo-classe CSS :placeholder-shownper <input>o <textarea>. Ecco un esempio / demo della suddetta pseudo-classe !:
/* Some base style */
.app {
margin: 10px auto;
padding: 10px;
}
code {
background-color: lightgray;
padding: 4px;
}
input {
padding: 5px 10px;
}
input:focus {
outline: none;
}
/* When there is something in input box give
it a solid blue border */
input:not(:placeholder-shown) {
border: solid 2px #42A5F5
}
/* Hide the p initially */
p {
background-color: #F0F4C3;
padding: 5px;
opacity: 0;
transition: all 300ms ease-in-out;
}
/* Show the p when the placeholder is not shown.
i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
opacity: 1
}<div class="app">
<h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
<label for="name">Enter your name</label>
<input type="text" id="name" placeholder="Your Name">
<p class="msg">Well done!</p>
</div>Ecco il collegamento a MDN Docs.
Questa è una tecnologia sperimentale Controllare attentamente la tabella di compatibilità del browser prima di utilizzarla in produzione.
Forse qualcuno troverà questa soluzione più intuitiva e più facile da implementare. Il meccanismo di questo è che il collegamento prende di mira se stesso e in tal caso è facile selezionare qualsiasi cosa venga dopo nel DOM.
.toggle-hide,
.toggle-content {
display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
display: block;
}
.toggle-show:target {
display: none;
}<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>Uso "display: none;" attribute.