DECOTEXS: MOSTRAR-OCULTAR TEXTO

Consejos

A continuación, se incluyen algunos consejos para ......

bla, bla
bla, bla.

OPCIÓN 1
__________________________________________________


<style>.lightweight-accordion{margin-bottom:.4em}.lightweight-accordion .lightweight-accordion-title{display:list-item;background:#f1f2f5;padding:10px 12px 10px 18px;cursor:pointer}.lightweight-accordion .lightweight-accordion-body{padding:10px}.lightweight-accordion.bordered .lightweight-accordion-body{border:2px solid #f1f2f6;border-top:0}.lightweight-accordion details[open] summary~*{animation:lwopen .5s ease-in-out}.lightweight-accordion .lightweight-accordion-title p,.lightweight-accordion .lightweight-accordion-title span,.lightweight-accordion .lightweight-accordion-title h1,.lightweight-accordion .lightweight-accordion-title h2,.lightweight-accordion .lightweight-accordion-title h3{display:inline;font-size:18px;font-family:inherit;font-weight:400}@keyframes lwopen{0%{opacity:0}100%{opacity:1}}.mejs-offscreen{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0px;position:absolute;width:1px;word-wrap:normal} 

        .bcls-section {
            margin-top: 2.5em;
            padding-top: .5em;
            border-top: 1px #CCC solid;
        }
        
        
         </style>


  <section class="bcls-section">
    <details class="lightweight-accordion" >
      <summary class="lightweight-accordion-title">
        <h2 id="Using_the_CodePen">Consejos</h2>
      </summary>

      <p>A continuación, se incluyen algunos consejos para ......</p>

      <ul>
        <li>bla, bla</li>
        <li>bla, bla.</li>
        
      </ul>
    </details>
  </section>

 </br>OPCIÓN 1</br>

OPCIÓN 2
__________________________________________________

<style>.modal-open {
 color: en línea;
 cursor: puntero;
 pantalla: en línea;
 } 
 .modal-label {
 posición: relativa;
 } 
 .modal-radio {
 opacidad: 0;
 posición: absoluta;
 visibilidad: oculta;
 } 
 .modal {
 arriba: 0;
 izquierda: 0;
 opacidad: 0;
 ancho: 100%;
 altura: 100%;
 posición: fijo;
 desbordamiento: oculto;
 transformación: escala(0);
 transición: opacidad .25s, transformación .25s;
 índice z: 99;
 } 
 .modal2 {
 transform: scale(0.8) translate(0,-100%);
 transition: transform .35s,opacity .35s;
 } 
 .modal3 {
 transform: translate(0.100%) scale(.9);
 } 
 .modal4 {
 transform: scale(0) rotate(180deg);
 } 
 #modal-open:checked + .modal {
 opacidad: 1;
 transform: scale(1);
 } 
 #modal-open2:checked + .modal2 {
 transform: scale(1) translate(0,0);
 opacidad: 1;
 } 
 #modal-open3:checked + .modal3 {
 transform: scale(1) translate(0,0);
 opacidad: 1;
 } 
 #modal-open4:checked + .modal4 {
 transform: scale(1) rotate(0deg);
 opacidad: 1;
 } 
 .overlay {
 arriba: 0;
 izquierda: 0;
 ancho: 100%;
 alto: 100%;
 posición: absoluto;
 fondo: rgba(0, 0, 0, 0.789);
 } 
 .modal .content {
 ancho: 70%;
 arriba: 15%;
 izquierda: 15%;
 altura: 300px;
 relleno: 20px;
 altura máxima: 70%;
 fondo: #fff;
 radio de borde: 15px;
 posición: absoluta;
 sombra de caja: 0 3px 15px -2px #ccc;
 } 
 .close-btn {
 ancho: 30px;
 alto: 30px;
 arriba: 10px;
 derecha: 20px;
 cursor: puntero;
 posición: absoluto;
 radio de borde: 50%;
 borde: 2px sólido #f44336;
 } 
 .close-btn:after,.close-btn:before {
 content: "";
 ancho: 70%; 
 altura: 2px; 
 izquierda: 15%; 
 arriba: 50%; 
 posición: absoluta; 
 antecedentes: #f44336; 
 arriba: calc (50% - 1px); 
 transform-origen: 50% 50%; 
 transformar: rotar (45 grados); 
 }
 .close-btn:before {
 transform: rotate(-45deg);
 } 
 .action-btn {
 color: #fff;
 border-radius: 15px;
 display: inline-block;
 padding: 10px 20px;
 background: #4caf50;

}</style>


<div class="content">
 <label class="modal-open modal-label" for="modal-open4">
 <p>Open Modal 4</p>
 </label>
 <input type="radio" name="modal" value="open" id="modal-open4" class="modal-radio"/>
 <div class="modal modal4">
 <label class="modal-label overlay">
 <input type="radio" name="modal" value="close" class="modal-radio"/>
 </label >
 <div class="content">
 <div class="top">
 <h2>Heading </h2>
 <label class="modal-label close-btn">
 <input type="radio" name="modal" value="close" class="modal-radio"/
> </label>
 </div>
 <p>BLA BLA MODAL 4</p>
 <label class="modal-label action-btn">
  OK <input type="radio" name="modal" value="close" class="modal-radio"/>
 </label>
 </div>
 </div>
 </div>

martes, 28 de junio de 2022

MOSTRAR-OCULTAR TEXTO

Consejos

Heading