0

I was wondering if anyone here would be as so kind as to help me out a bit. I am looking to make expandable paragraphs for my client's website. They would like to keep all of the content from their site, which is pretty massive, and they want a total overhaul of the design. They mainly wan tot keep it for SEO purposes. Anyhow, I thought it would be helpful for the both of use if there is some way to use expandable paragraphs, you know, with a "read more..." link after a certain line of text. I know that there are some JQuery and Java solutions for this, but we really would like to stay away from those options, if at all possible. When would like HTML and CSS, if we can.

Here is kind of an example:

HEADING HERE

Paragraph with a bunch of text. I would like this to appear in a pre-determined line. For example, maybe the start of the paragraph goes on for, let's say, three lines and then we have the [read more...]

When the visitor clicks "read more", we would like the rest of the content to just expand to reveal the article in its entirety. I would like for the content to already be on the page, so it just expands. I don't want it to be called in from another file or anything, if that makes sense. Thank you in advance for any and all help. It will be greatly appreciated!

Testudo

4

3 回答 3

2

一个简单的解决方案就是这样

您只需要在 CSS 中使用 2 个切换事件display: none;和display: block;

http://jsfiddle.net/6W7XD/1/

of course you would need to pre-program where you want to start the hide by including a div of it with the close button span inside the div to do the toggles

如果你决定使用 javascript，你可以看看这里

http://jedfoster.com/Readmore.js/

于 2014-08-25T16:15:53.737 回答
1

我认为您需要使用 Jquery 或 Javascript

$('a').click(function() {
    var p = $('a').prev('p')
    var lineheight = parseInt(p.css('line-height'))
    if (parseInt(p.css('height')) == lineheight*2) {
       p.css('height','auto');
       $(this).text('Less')
    } else {
       p.css('height',lineheight*2+'px');
       $(this).text('More')
    }
});

演示

于 2014-08-25T16:16:21.267 回答
0

这可以使用:targetjQuery/Javascript-less 选项的选择器来实现。

为此，您需要将每个扩展文本设置为目标（给它们一个 id）。然后，将“显示更多”选项卡设置为所述 id/目标的目标。

就像是：

.article {
    position: relative;
    border: 1px solid grey;
    overflow: hidden;
    width: 300px;
}
.article:target {
    height: auto;
}
.article:not(target) {
    height: 50px;
}
.toggle {
    padding: 2px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: white;
    border: 1px solid red;
}

您可以在此处查看可测试的小提琴。

注意我:not(:target)用来确保它在未选择时是正确的尺寸。

于 2014-08-25T16:26:20.070 回答