This is a migrated thread and some comments may be shown as answers.

Collapse Text Control

3 Answers 136 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Brett Robichaud
Top achievements
Rank 1
Brett Robichaud asked on 07 Mar 2009, 05:30 AM
I am wondering what control I use to get the ability to collapse some text. For example on this page: http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx if you search for the text "Example Source Code & Description", you can see that you can click it to collapse or expand the text below it. What control is that using and how do I style it similarly to that look?

3 Answers, 1 is accepted

Sort by
0
PureCode
Top achievements
Rank 2
answered on 07 Mar 2009, 08:31 PM
Hi,

Seems to be done using a little javascript that shows or hides a block using css.

js:

function toggleDisplay(blockId, titleId) 
    var block = document.getElementById(blockId); 
    var title = document.getElementById(titleId); 
    if (block.className.indexOf("qsfNone") == -1) 
    { 
        block.className = block.className + " qsfNone"
        title.className = "qsfSubtitleCollapsed"
    } 
    else 
    { 
        block.className = block.className.replace(/qsfNone/, ""); 
        title.className = "qsfSubtitle"
    } 
    return false

CSS for 'collapsed state':

.qsfNone  
    height1px
    left: -3333px
    overflowhidden
    positionabsolute
    top: -100%; 
    width1px

The referenced 'qsfSubtitleCollapsed' and 'qsfSubtitle' css classes in the javascript determine what the title looks like in collapsed or open state, as far as i can tell from a quick DebugBar look at the page you referenced. All the actual collapsing and opening seems to be done by adding or removing the 'qsfNone' css class above from the block one wants to show or hide.

Regards,

Mike
0
Brett Robichaud
Top achievements
Rank 1
answered on 09 Mar 2009, 03:07 PM
Thanks for the response Mike. I had assumed this was done using a Telerik control so I never bothered to look at the source. Does anyone know if a Telerik control can accomplish this look and feel?
0
Accepted
Paul
Telerik team
answered on 09 Mar 2009, 03:13 PM
Hello Brett,

You can use RadPanelBar control to achieve the same look and feel. Here's an example - Templates.

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
General Discussions
Asked by
Brett Robichaud
Top achievements
Rank 1
Answers by
PureCode
Top achievements
Rank 2
Brett Robichaud
Top achievements
Rank 1
Paul
Telerik team
Share this question
or