Tutorials/en/Text Teaser

Some texts are just too long for showing them always complete. A nice option would be to create a teaser and after clicking on "more information..." showing the complete text. Why all those efforts? Because it is important for SEO to have long text and describe in detail. Users / Customers like it more summarily and short. With this snippet you have both and it´s quite fancy as well!

Here an example for the category long description:

search for this part of the code in /out/azure/tpl/page/list/list.tpl: [{if $actCategory-&gt;oxcategories__oxlongdesc-&gt;value }] &lt;div id="catLongDesc" class="categoryDescription"&gt;[{oxeval var=$actCategory-&gt;oxcategories__oxlongdesc}]&lt;/div&gt; [{/if}]&lt;span id="1313001127165S" style="display: none;"&gt; &lt;/span&gt; then replace it with: [{if $actCategory-&gt;oxcategories__oxlongdesc-&gt;value }] &lt;div id="catLongDesc" class="categoryDescription"&gt; &lt;div id="short_text"&gt; [{oxeval var=$actCategory-&gt;oxcategories__oxlongdesc|truncate:400:" ...":false}] &lt;a onclick="return tricker('hidden_text')" href="javascript:void(0)" style="color:red;cursor:pointer;"&gt; more information..&lt;/a&gt; &lt;/div&gt; &lt;div id="hidden_text" style="display:none;"&gt; [{oxeval var=$actCategory-&gt;oxcategories__oxlongdesc}] &lt;a onclick="return tricker('hidden_text')" href="javascript:void(0)" style="color:red;cursor:pointer;"&gt; ...less information&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; [{/if}] create a new file named HideText.js in the directory /out/azure/src/js with following content: function tricker(a) {  var e=document.getElementById(a); var x=document.getElementById('short_text'); if(!e)return true; if(e.style.display=="none") {     e.style.display="block"; x.style.display="none"; }  else {     e.style.display="none"; x.style.display="block"; }  return true; } after that adjust base.tpl and include the new script: [{oxscript include='js/HideText.js'}] ...and Bob's your uncle!

Don´t forget to clear /tmp!

Thanks to caladan for sharing!

thread in oxid-forums (german): http://www.oxid-esales.com/forum/showthread.php?p=64786#post64704