Создание ссылки "читать дальше", которая расширяет контент на странице

Я хотел бы создать ссылку для дополнительной информации, которая расширила бы уже показанный абзац, чтобы раскрыть весь текст на той же странице. Если бы это можно было решить с помощью HTML5 и CSS, мне бы этого хотелось, но я предполагаю, что понадобится какой-то тип скрипта.

Например:

Пример текста

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam Vitae Velit Vitae Cavor Semper Tempor Ac Vitae Magna. Меценат ullamcorper neque. Жалоба Aliquam vitae luctus nisi rutrum eleifend non non leo.

Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada Fames ac ante ipsum primis у фоцибуса. Aliquam Lobortis Accumsan Tempor. Aliquam sollicitudin pulvinar est, quis convallis Tellus.

Читать дальше >>

Я хотел бы, чтобы обычный текст отображался с помощью ссылки "Подробнее >>" ниже, а затем жирный текст будет отображен после нажатия на ссылку.

Я также хочу иметь изображение в скрытом разделе, возможно ли это?

Заранее спасибо.

Источник

11 ответов

Решение

Ванильная альтернатива JS:

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.</p>
<div id="more" style="display:none;">
    <p>Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>
    <img..../>
</div>
<a href="javascript:showMore()" id="link">Read More >></a>`

JS:

function showMore(){
    //removes the link
    document.getElementById('link').parentElement.removeChild('link');
    //shows the #more
    document.getElementById('more').style.display = "block";
}
Источник

Есть несколько действительно благодарных плагинов, использующих jquery. Вот что я нашел

https://github.com/jedfoster/Readmore.js

Требуемая разметка для Readmore.js также очень легкая и очень простая. Нет необходимости в сложных наборах div-ов или жестко закодированных имен классов, просто вызовите .readmore() на элементе, содержащем ваш блок текста, а все остальное - Readmore.js.

Источник

Я создал что-то простое в использовании

  • установить класс для содержимого "div"
  • используйте "", чтобы отделить содержимое, отображаемое по клику, от всегда видимого содержимого
  • все остальное будет заботиться css и js

HTML:

<div class="m-more-less-content">
Lorem ipsum dolor sit amet, <!--more--> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

Смотрите пример здесь

Источник

Вот чистое решение HTML + CSS. Вы можете установить флажок "Показать больше" с помощью CSS, чтобы он соответствовал вашим потребностям, включая скрытие части флажка.

http://jsfiddle.net/T7eXL/

<div id="box">
    <p>Lorem ipsummy</p>
    <input type="checkbox" class="show-more"> Show more
    <div class="more">
        <p>Lorem</p>
    </div>
</div>

.more {
    display:none;
}

#box .show-more:checked + .more {
    display:block;
}
Источник

Да, это так... это всего лишь небольшой пример http://jsfiddle.net/QDg4P/3/

<div>
<h1>Example text</h1>
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.</p><a href="#" onclick="show('example1')"> read more </a>
<p id="example1" style="display:none; font-weight: bold"><img src="http://tux.crystalxp.net/png/kami23-flower-tux-4037.png"/>Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>

<script>
 function show(ele){
     document.getElementById(ele).style.display = 'block';   
}
</script>
Источник

После текста поставить этот код

<p><a onclick="javascript:ShowHide('HiddenDiv')">Read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
    <font face="Arial" size="+2" color="#306Eff" align="right">YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE
 YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
    if(document.getElementById(divId).style.display == 'none')
    {
        document.getElementById(divId).style.display='block';
    }
    else
    {
        document.getElementById(divId).style.display = 'none';
    }
}
// ]]></script>
Источник

Я создал JQuery/JS-скрипт, который должен помочь: JSFiddle: http://jsfiddle.net/Starfire1337/pL9ve/

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="/js/site.js"></script> // Notice the custom JS is included AFTER jQuery
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.</p>
<a href="#collapse" class="nav-toggle">Read More...</a>
<div id="collapse" style="display:none">
    <p>Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>
</div>

и в /js/site.js:

$(document).ready(function () {
    $('.nav-toggle').click(function () {
        var collapse_content_selector = $(this).attr('href');
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function () {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('Show');
            } else {
                toggle_switch.html('Hide');
            }
        });
    });

});
Источник

Вы можете сделать это, изменив свойство CSS с помощью Javascript.

element.style.display = 'block';

Код JS

function read_more() {
document.getElementById('hidden-first').style.display = 'block';
}

document.getElementById('read-more').addEventListener('click', read_more);

Смотрите этот код на JSfiddle

Источник

Более продвинутая версия, если ваш текст динамический или взят из базы данных.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Read More Link</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    var maxLength = 300;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
});
</script>
<style>
    .show-read-more .more-text{
        display: none;
    }
</style>
</head>
<body>    
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="show-read-more">This is a very long paragraph...</p>
</body>
</html>
Источник

Если вы хотите что-то вроде этого (прочитайте больше элементов после текста), и у вас также есть несколько динамических элементов:

Каждый месяц первые 10 ТБ не взимаются. Весь другой трафик... Читать далее

HTML и CSS:

<small class="truncate_string_multilines block-with-text" id="multiline_block" data-initial_value="Every month first 10 TB are are not charged. All other traffic (incoming and outgoing) is charged <a href="" class="morelink_multi">Read more</a>">Every month first 10 TB are are not charged. All other traffic... <a href="#" class="morelink_multi">Read more</a></small> 

.block-with-text {
     height: 4.2em;
}
small {
    font-weight: 400;
    font-size: 0.875rem;
    display: inline-block;
    line-height: 1.4;
}

JS & Jquery

var initial_string = [], wordArray = '';
function ellipsizeTextBox(class_name) {
    var el = document.getElementsByClassName(class_name);
    for (i = 0, len = el.length; i < len; i++) {
        initial_string[i] = el[i].innerHTML;
        wordArray = el[i].innerHTML.split(' ');
        while(el[i].scrollHeight > el[i].offsetHeight) {
            wordArray.pop();
            el[i].innerHTML = wordArray.join(' ') + '... ' + "<a href=\"#\" class=\"morelink_multi\">" + moretext + "</a>";
            }
            el[i].setAttribute("data-initial_value", initial_string[i]);
        }
    }



$("body").on("click",".morelink_multi", function(){
    var this_element = $(this),
        parent_of_link = $(this).parent();
    if(this_element.hasClass("less")) {
        this_element.removeClass("less");
        this_element.html(moretext);
        parent_of_link.addClass('block-with-text');
        ellipsizeTextBox('truncate_string_multilines');
    } else {
        parent_of_link.removeClass('block-with-text');
        parent_of_link.html('');
        parent_of_link.html(parent_of_link.data('initial_value') + " <a href=\"#\" class='morelink_multi less'>"+ lesstext + "</a>");
    }
});
Источник

См. Https://www.w3schools.com/howto/howto_js_expanding_grid.asp

Другой пример Vanilla HTML, javascript и css, если вам нужно что-то подобное, и который меняет поле при щелчке на Box 2 или Box 3. В этот момент я поместил кнопку с крестиком только на расширенный div, но вы можете вернуть его обратно. щелкните коробку еще раз:

HTML:

      <!-- The grid: three columns -->
<div class="row">
    <div class="column" onclick="openTab('b1');" style="background: green;">Box 1</div>
    <div class="column" onclick="openTab('b2');" style="background: blue;">Box 2</div>
    <div class="column" onclick="openTab('b3');" style="background: red;">Box 3</div>
</div>

<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="display: none; background: green">
    <!-- If you want the ability to close the container, add a close button -->
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 1</h2>
    <p>Lorem ipsum..</p>
</div>

<div id="b2" class="containerTab" style="display: none; background: blue">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 2</h2>
    <p>Lorem ipsum..</p>
</div>

<div id="b3" class="containerTab" style="display: none; background: red">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
    <h2>Box 3</h2>
    <p>Lorem ipsum..</p>
</div>

CSS:

      /* The grid: Three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Closable button inside the image */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

JS:

      // Hide all elements with class="containerTab", except for the one that matches the clickable grid column
function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName("containerTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}
Источник
Другие вопросы по тегам