1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Expandable text sections

Expandable text sections

2 posts, 0 answered
  1. Pierre
    Pierre avatar
    12 posts
    Registered:
    03 Jun 2008
    25 Sep 2008
    Link to this post
    Hi there,

    We want to have a button at the bottom of our text areas [generic content areas] that expandes the section to reveal all of the text, similar to the "Read more..." functionality found on most sites.

    Example: Here is a paragraph:

    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                                                                                                                                             [+]

    When the user clicks on the [+] then the rest of the text should be displayed instantly.

    i.e.
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    more text more textmore text more textmore text more textmore text more text more text more textmore text more textmore text more textmore text more text more text more textmore text more textmore text more textmore text more text

    How can we achieve this functionality in sitefinity?

    Thanks,
    Pierre.


             
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    30 Sep 2008
    Link to this post
    Hi Pierre,

    Expand/Collapse functionality can be achieved with a javascript function. For example:

    <script language="javascript" type="text/javascript"
     
    function expand(item) { 
     obj=document.getElementById(item); 
     col=document.getElementById("x" + item); 
      
     if (obj.style.display=="none") { 
      obj.style.display="block"
      col.innerHTML="[-]"
     } 
     else { 
      obj.style.display="none"
      col.innerHTML="[+]"
     } 
     
    </script> 
     
    <href="javascript:expand('main');" id="xmain">[+]</a> Main Item  
    <div id="main" style="margin-left:1em">  
        Some text<br /> 
        Some text<br /> 
        Some text<br /> 
    </div> 

    Note that you need to enable scripts for the corresponding RadEditor (for example RadEditor in ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx template) like this:

    .ascx
    <telerik:RadEditor  
        runat="server"  
        ID="RadEditor1" 
        AllowScripts="true" 

    Do let us know if this helps.

    Greetings,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
2 posts, 0 answered