Wir verwenden Cookies zur Verbesserung der Benutzerfreundlichkeit und zum Verfolgen der Besucherströme mit Matomo (Piwik).
Mehr Infos auf der Datenschutzseite. Du kannst die Cookie-Erlaubnis jederzeit am Ende der Seite widerrufen.

Plugin - jQuery Collapser

Das Plugin vereint u.a. die alten Plugins jTruncate / cutString und bietet noch mehr.

Basic: 4 Grundbeispiele des Plugins collapser

 

 

Standardwerte

Wenn im Preset nichts anderes eingetragen ist gelten diese Werte:

target: "next",
mode: "words",
speed: "slow",
truncate: 10,
ellipsis: "...",
effect: "fade",
controlBtn: "",
showText: "Show more",
hideText: "Hide text",
showClass: "show-class",
hideClass: "hide-class",
atStart: "hide",
lockHide: false,
dynamic: false,
changeText: false,
beforeShow: null,
afterShow: null,
beforeHide: null,
afterHide: null


Demo4: zeige/verstecke Element
Klick mich um den folgenden Absatz zu zeigen/verstecken


Einklappen und Ausklappen: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

HTML:
<a class="demo4 btn btn-default">Click me to show/hide the paragraph element below</a>
<p>
  Lorem ipsum dolor sit amet,
 consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Preset:
           $('.demo4').collapser({
                mode: 'block',
                target: 'next'
            }); 

CSS:
.btn{
    -moz-user-select: none;
    background-image: none;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.btn-default{
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    color: #333333;
}


Demo3: Anzahl Zeilen kürzen auf 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Klappt nicht hier in Wysiwyg des Moduls Accordion solange das Template auf minify umgestellt ist. In Code2 oder normalem Wysiwyg geht es, siehe unten.

 

HTML:
<p class="demo3">
  Lorem ipsum dolor sit amet,
 <em>consectetur</em> adipisicing elit,
 sed do eiusmod tempor <u>incididunt</u> ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum. 
  Click me to show/hide the paragraph element below
</p>

Preset:
            $('.demo3').collapser({
                mode: 'lines',
                truncate: 2
            });


Demo2: Anzahl Worte kürzen auf 10

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis smiley  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

 

HTML:
<p class="demo2">
  Lorem ipsum <strong>dolor</strong> sit amet,
 <s>consectetur</s> adipisicing elit,
 
  sed do eiusmod <em>tempor</em> incididunt ut labore et dolore magna aliqua. Ut enim ad <code>minim veniam</code>,
 
  quis <img alt="" height="18px" src="images/smiley.png" /> nostrud exercitation <u>ullamco</u> laboris nisi ut <strong>aliquip</strong> ex ea commodo consequat. 
  Duis aute irure dolor in <strong>reprehenderit</strong> in <em>voluptate</em> velit esse <em>cillum</em> dolore eu fugiat nulla pariatur.
</p>

Preset:
            $('.demo2').collapser({
                mode: 'words',
                truncate: 10,
                ellipsis: ' ... <b> More Text? --> </b> ',
                showText: '(Zeige mehr Worte (%s)'
            });


Demo1: Anzahl Zeichen kürzen auf 30

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.

 

HTML:

<p class="demo1">
  Lorem ipsum dolor sit amet,
 consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
</p>

Preset:
$(".demo1").collapser({
            mode: 'chars',
            truncate: 30,
            showText: '<span style="color:red">Zeige mehr</span> (%s)',
            hideText: 'Weniger'
});



Anzahl Zeilen kürzen in code2(html) - wie Demo3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Click me to show/hide the paragraph element below

Anzahl Zeilen kürzen in Wysiwyg - wie Demo3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Click me to show/hide the paragraph element below



Mehr Beispiele / Autor: http://www.aakashweb.com/demos/jquery-collapser


Anzeige durch Droplet MoreLikeThis