Skip to main content
se eliminó 1 carácter en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. Intento lo siguiente, pero por alguna razón no me funciona:

$(document).ready(function() {
  $(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
  }, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.119.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

Si se puede hacer solo con JavaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery.

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. Intento lo siguiente, pero por alguna razón no me funciona:

$(document).ready(function() {
  $(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
  }, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

Si se puede hacer solo con JavaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery.

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. Intento lo siguiente, pero por alguna razón no me funciona:

$(document).ready(function() {
  $(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
  }, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

Si se puede hacer solo con JavaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery.

hacer código ejecutable + formato de texto
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

¿Como ¿Cómo realizar el efecto de leer mas?

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. intentoIntento lo siguiente, pero por alguna razón no me funciona. sí:

$(document).ready(function() {
  $(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
  }, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

Si se puede hacer solo con javaScriptJavaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQueryjQuery.

<style type="text/css">
        .more {
            cursor: pointer;
            background-color: #ccf;
        }

        .complete {
            display: none;
        }
    </style>
<div class="text-comment">
            <p class="text-par">"Vision"</p>
            <p class="text-name">
              <span class="summary">
                <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
                  id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
                  diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
              </span>
              <span class="complete">
                <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
                <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
                  Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
                  cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
              </span>
              <span class="more">Leer mas...</span>
            </p>
            <script type="text/javascript" src="http://lineadecodigo.com/js/jquery/jquery.js"></script>
            <script>
                  $(document).ready(function () {
                      $(".more").toggle(function () {
                        $(this).text("Leer menos...").siblings(".complete").show();
                      }, function () {
                        $(this).text("Leer mas...").siblings(".complete").hide();
                      });
                    });
            </script>

¿Como realizar el efecto de leer mas?

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. intento lo siguiente, pero por alguna razón no me funciona. sí se puede hacer solo con javaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery

<style type="text/css">
        .more {
            cursor: pointer;
            background-color: #ccf;
        }

        .complete {
            display: none;
        }
    </style>
<div class="text-comment">
            <p class="text-par">"Vision"</p>
            <p class="text-name">
              <span class="summary">
                <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
                  id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
                  diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
              </span>
              <span class="complete">
                <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
                <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
                  Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
                  cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
              </span>
              <span class="more">Leer mas...</span>
            </p>
            <script type="text/javascript" src="http://lineadecodigo.com/js/jquery/jquery.js"></script>
            <script>
                  $(document).ready(function () {
                      $(".more").toggle(function () {
                        $(this).text("Leer menos...").siblings(".complete").show();
                      }, function () {
                        $(this).text("Leer mas...").siblings(".complete").hide();
                      });
                    });
            </script>

¿Cómo realizar el efecto de leer mas?

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. Intento lo siguiente, pero por alguna razón no me funciona:

$(document).ready(function() {
  $(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
  }, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

Si se puede hacer solo con JavaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery.

Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52

¿Como realizar el efecto de leer mas?

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. intento lo siguiente, pero por alguna razón no me funciona. sí se puede hacer solo con javaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery

<style type="text/css">
        .more {
            cursor: pointer;
            background-color: #ccf;
        }

        .complete {
            display: none;
        }
    </style>
<div class="text-comment">
            <p class="text-par">"Vision"</p>
            <p class="text-name">
              <span class="summary">
                <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
                  id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
                  diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
              </span>
              <span class="complete">
                <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
                <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
                  Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
                  cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
              </span>
              <span class="more">Leer mas...</span>
            </p>
            <script type="text/javascript" src="http://lineadecodigo.com/js/jquery/jquery.js"></script>
            <script>
                  $(document).ready(function () {
                      $(".more").toggle(function () {
                        $(this).text("Leer menos...").siblings(".complete").show();
                      }, function () {
                        $(this).text("Leer mas...").siblings(".complete").hide();
                      });
                    });
            </script>