readmore-readless/index.html at master · mfarid/readmore-readless · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
    <title>Demo - jQuery Read more - Read less : Mohd Farid</title>
</head>

<style type="text/css">

    .button  {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        text-decoration: none;
        background-color: #49afcd;
        *background-color: #2f96b4;
        background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
        background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
        background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
        background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
        background-repeat: repeat-x;
    }

</style>

<body>

<strong>Example 1 : Default behaviour: 2 items in summary</strong>
<div id="readMoreReadLess1">
    <ul class="item">
        <li>Item 1</li>
        <li class="details">Details of Item 1</li>
    </ul>

    <ul class="item">
        <li>Item 2</li>
        <li class="details">Details of Item 2</li>
    </ul>

    <ul class="item">
        <li>Item 3</li>
        <li class="details">Details of Item 3</li>
    </ul>

</div>

  <br/>

<strong>Example 2 : Show only one item in summary.</strong>
<div id="readMoreReadLess2">
    <ul class="item">
        <li>Item 1</li>
        <li class="details">Details of Item 1</li>
    </ul>

    <ul class="item">
        <li>Item 2</li>
        <li class="details">Details of Item 2</li>
    </ul>

    <ul class="item">
        <li>Item 3</li>
        <li class="details">Details of Item 3</li>
    </ul>

</div>

<br/>

<strong>Example 3 : With custom text and styling of links</strong>
<div id="readMoreReadLess3">
    <ul class="item">
        <li>Item 1</li>
        <li class="details">Details of Item 1</li>
    </ul>

    <ul class="item">
        <li>Item 2</li>
        <li class="details">Details of Item 2</li>
    </ul>

    <ul class="item">
        <li>Item 3</li>
        <li class="details">Details of Item 3</li>
    </ul>
</div>

<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
     That way the browser will have loaded the images
     and will know the width of the images. No need to
     specify the width in the CSS or inline. -->

<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

<script src="js/jquery.readmore-readless.js" type="text/javascript"></script>

<!-- Plugin initialization -->
<script type="text/javascript">

    $(document).ready(function () {
        // // Initialize the plugin with no custom options
        $("#readMoreReadLess1").readMoreReadLess();

        // Use the plugin with items in summary set to 1
        $("#readMoreReadLess2").readMoreReadLess({
            itemInSummary: 1
        });

        // Use the plugin with custome text for Read more and Read less.
        //Added custom class to Read More and Read less links
        $("#readMoreReadLess3").readMoreReadLess({
            readMoreText: 'Show more items ...',
            readLessText: 'Show fewer items ...',
            readMoreClass:'button',
            readLessClass:'button'
        });
    });
</script>

</body>
</html>