"Сокращение текста"
Bootstrap 3.3.0 Snippet by unqsmile

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div> <h2>Ингаляторы</h2> <p>Ингаляторы – это специализированные приборы, используемые в медицинских учреждениях и в быту для лечения различных заболеваний дыхательной системы. Принцип действия ингалятора построен на обеспечении максимально глубокого проникновения лечащего состава к пораженным участкам органов дыхания с использованием пара. Препарат проникает в организм и оседает на поверхности, что обеспечивает его более эффективное действие. При вдыхании паров происходит расширение сосудов и размягчение тканей, способствующее более интенсивному поглощению пораженными участками лечащего состава. Использование парового ингалятора минимизирует болевые ощущения, усиливает циркуляцию крови и процесс выведения слизистых образований.</p> <button id="more">Читать дальше »</button> <button id="less">« Читать дальше</button> </div> </body> </html> http://jsbin.com/xavuruzego/edit?html,css,js,output
body { margin: 50px; font: 15px/1.5 sans-serif; } img { margin: .8em 0; } div { border: 0px solid black; padding: 0px; } #less { display: none; } button {background: none; border: 0; color: #065BDE;}
function excerpt(str, nwords) { var words = str.split(' '); words.splice(nwords, words.length-1); return words.join(' ') + (words.length !== str.split(' ').length ? '…' : ''); } var $p = $('p'); var $more = $('#more'); var $less = $('#less'); function less() { $p.data('text', $p.html()); // store untouched text first $p.html( excerpt($p.html(), 50) ); $more.show(); $less.hide(); } function more() { $p.html($p.data('text')); $more.hide(); $less.show(); } less(); // init $('#more').click(more); $('#less').click(less);

Related: See More


Questions / Comments: