Я использую readmore.js, и я хотел бы расширить свой абзац дважды.
На данный момент я использую одну расширенную ссылку со значением "Дополнительная информация", которая показывает весь текст при нажатии.
В нижней части есть еще одна ссылка со значением "Меньшая информация", которая скрывает текст при нажатии:
This is some text and continues for ages...
<a href="#">More information</a>
This is some text and continues for ages...
but is not as long as you think.
<a href="#">Less information</a>
Я хотел бы добавить еще одну ссылку расширения "Еще больше информации". В этой ситуации "Дополнительная информация" будет отображать только часть текста, а "Еще больше информации" - полный текст. Это будет выглядеть примерно так:
This is some text and continues for ages...
<a href="#">More information</a>
This is some text and continues for ages...
and it goes on and on and on...
<a href="#">Even more information</a>
This is some text and continues for ages...
and it goes on and on and on...
but not as long as you think.
<a href="#">Less information</a>
Этот фрагмент показывает мою текущую ситуацию:
$('.example').readmore({
collapsedHeight: 300,
speed: 500,
embedCSS: false,
moreLink: '<a href="#">More information</a>',
lessLink: '<a href="#">Less information</a>',
beforeToggle: function(trigger, element, expanded) {
if (expanded === false) {
element.addClass('remove-after');
} else {
element.removeClass('remove-after');
}
}
});.example+[data-readmore-toggle],
.example[data-readmore] {
display: block;
}
.example[data-readmore]::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 85%);
bottom: 0;
content: '';
display: inline-block;
height: 250px;
position: absolute;
right: 0;
width: 100%;
}
.remove-after::after {
display: none !important;
}
[data-readmore-toggle] {
margin-left: 15px;
}
img {
float: right;
}<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/readmore.min.js"></script>
<link href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="example col-md-12">
<p>They say everything looks better with odd numbers of things. But sometimes I put even numbers—just to upset the critics. Don't be afraid to make these big decisions. Once you start, they sort of just make themselves. Now let put some happy little
clouds in here. We can always carry this a step further. There really no end to this. Think about a cloud. Just float around and be there. We want to use a lot pressure while using no pressure at all.</p>
<p>Look around, look at what we have. Beauty is everywhere, you only have to look to see it. That the way I look when I get home late; black and blue. All you have to do is let your imagination go wild. We have a fantastic little sky!</p>
<p>All kinds of happy little splashes. We don't want to set these clouds on fire. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. It looks so good, I might as well not stop. We need dark
in order to show light. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself.</p>
<img src="https://dummyimage.com/200x200/2d5cc2/fff" />
<p>Van Dyke Brown is a very nice brown, it almost like a chocolate brown. We're trying to teach you a technique here and how to use it. This present moment is perfect simply due to the fact you're experiencing it.</p>
<p>If what you're doing doesn't make you happy - you're doing the wrong thing. We spend so much of our life looking - but never seeing. In this world, everything can be happy. Everyone is going to see things differently - and that the way it should be.
And just raise cain.</p>
<p>There nothing wrong with having a tree as a friend. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. Tree trunks grow however makes them happy.</p>
<p>Let your imagination be your guide. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush. We wash our brush with odorless thinner. Every highlight needs it own personal
shadow. Don't kill all your dark areas - you need them to show the light. Working it up and down, back and forth.</p>
<p>Don't forget to tell these special people in your life just how special they are to you. The only thing worse than yellow snow is green snow. That why I paint - because I can create the kind of world I want - and I can make this world as happy as
I want it. Let build an almighty mountain. You have to make almighty decisions when you're the creator.</p>
<p>We have a fantastic little sky! Everybody different. Trees are different. Let them all be individuals. Just go out and talk to a tree. Make friends with it. Go out on a limb - that where the fruit is. There are no mistakes. You can fix anything
that happens.</p>
<p>You have to make those little noises or it won't work. We have no limits to our world. We're only limited by our imagination. I want everbody to be happy. That what it all about.</p>
<p>Nice little clouds playing around in the sky. It a super day, so why not make a beautiful sky? We spend so much of our life looking - but never seeing. The secret to doing anything is believing that you can do it. Anything that you believe you can
do strong enough, you can do. Anything. As long as you believe. Everything not great in life, but we can still find beauty in it.</p>
<p>If you've been in Alaska less than a year you're a Cheechako. You don't have to be crazy to do this but it does help. I'm going to mix up a little color. Well use Van Dyke Brown, Permanent Red, and a little bit of Prussian Blue. And I will hypnotize
that just a little bit. Nothing gonna make your husband or wife madder than coming home and having a snow-covered dinner.</p>
<p>There it is. Don't fiddle with it all day. No worries. No cares. Just float and wait for the wind to blow you around.</p>
<p>All you need to paint is a few tools, a little instruction, and a vision in your mind. Let put a touch more of the magic here. Now let put some happy little clouds in here. We'll lay all these little funky little things in there. But we're not there
yet, so we don't need to worry about it. All you have to learn here is how to have fun.</p>
</div>