No encuentro solución en Google.
¿Se puede ocultar texto y mostrarlo en puro y solo con HTML5? Probe con <detais><sumary>bla bla bla</sumary></details>
y nada.
En principio saber si se puede, gracias.
-
1No se puede, para ello tienes que hacer uso de CSS y/o de Javascript. Lo único que puedes hacer es que el texto esté oculto siempre, pero el usuario no podría ejecutar una acción para poder verlo.– iMangasel 26 may. 2020 a las 11:42
-
Vale gracias, quería hacerlo en html puro pero veo que no, que o CSS o java etc, ok me sirvió de mucho la aclaración.– Davidel 26 may. 2020 a las 15:47
Añade un comentario
|
1 respuesta
Si estoy entendiendo bien tu pregunta , quieres un botón que oculte texto y al seleccionarlo te lo muestre cierto? Si es así, puedes hacer esto.
Clase CSS
.spoiler {
display: block;
margin: 7px 0px;
}
.spoiler-content {
background-color: #222;
}
.spoiler div:first-child {
width: 100%;
background-color: #39382e;
color: rgb(247, 247, 247);
margin: 0px;
padding: 4px 0px 4px 0px;
text-align: center;
cursor: pointer;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.spoiler div:first-child:hover {
color: #AAA;
}
.spoiler div:last-child {
display: none;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding: 5px 5px 5px 5px;
}
Clase Javascript
function LMSpoiler() {
/*
* CONFIGURARTION
*/
this.contentTag = "#post"; //id for element which contains spoiler tags (usually main container or something like this)
this.customShowText = "Mostrar contenido oculto"; //text to show in top of spoilers
this.customSpoilerClass = "spoiler"; //class used for style spoilers
this.spoilerTime = 350; //time take to open or close the spoiler
/*
* END CONFIGURATION
*/
this.spoilerParser = function() {
var content = $(this.contentTag).html();
var insideText = "";
var completeSpoiler = "";
var spoiler = "";
var spoilerIndex = 0;
var endPosition = 0;
var lastPosition = 0;
try {
while(content.indexOf("[spoiler]", lastPosition) != -1) { //if there is a tag to convert to spoiler
lastPosition = content.indexOf("[spoiler]", lastPosition); //takes the position of start tag of spoiler
endPosition = content.indexOf("[/spoiler]", lastPosition); //takes the position of end tag of spoiler
insideText = content.substr(lastPosition + 9, endPosition - (lastPosition + 9)); //text which is inside spoiler tags
completeSpoiler = content.substr(lastPosition, (endPosition + 10) - lastPosition); //all content including spoiler tags
spoiler = '<div class="' + this.customSpoilerClass + '"><div class="show-button" data-show="spoiler' + spoilerIndex +
'" onclick="spoiler(this, ' + this.spoilerTime + ');">' + this.customShowText + '</div><div id="spoiler' +
spoilerIndex + '" class="spoiler-content">' + insideText + '</div></div>';
content = content.replace(completeSpoiler, spoiler); //replace all content with a spoiler
$(this.contentTag).html(content); //and attach it to content
insideText = "";
completeSpoiler = "";
spoiler = "";
lastPosition ++;
spoilerIndex ++;
}
} catch(e) {}
};
}
function spoiler (element, time) {
var id = $(element).data("show");
$("#" + id).slideToggle(time);
}
Etiqueta HTML
<div class="spoiler">
<div class="show-button" data-show="spoiler0" onclick="spoiler(this, 350);">Mostrar contenido oculto</div><div id="spoiler0" class="spoiler-content" style="display: block;"><p></p>
<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">Podemos</span> <span class="n">usar</span> <span class="o">[</span><span class="n">spoiler</span><span class="o">]</span> <span class="n">y</span> <span class="o">[/</span><span class="n">spoiler</span><span class="o">]</span> <span class="n">para</span> <span class="n">ocultar</span> <span class="n">contenido</span>
</code></pre></div></div>
<p></p></div></div>