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

Online Demo show/hide function

3 Answers 134 Views

General Discussions

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

3 Answers, 1 is accepted

Accepted

answered on 22 Jul 2008, 01:31 AM

Hello Mac,

You can get this kind of functionality easily with our RadPanelBar control. Check out these demos to see the RadPanelBar in action. If you want the state to be persisted across page views, all you have to do is simple set the PersistStateInCookie property to true. You'll see a demo that specifically addresses this feature in the demo area.

Here is a quick example I whipped up to show you how to get similar functionality in less than 5 minutes.

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />   
        
                    <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  
        
                        PersistStateInCookie="true" 
        
                        Width="300px"> 
        
                        <Items> 
        
                            <telerik:RadPanelItem Text="Click here to show the content"> 
        
                                <Items> 
        
                                    <telerik:RadPanelItem> 
        
                                        <ItemTemplate> 
        
                                            <p style="color:White; margin: 10px 5px 10px 5px;"> 
        
                                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eros. Donec mattis orci nec enim.  
        
                                                In ut nibh eu ante dignissim porta. Pellentesque tempus. Proin quis lectus vitae risus auctor  
        
                                                rutrum. Nullam lobortis pede in odio. Fusce vel orci eu lorem luctus congue. Maecenas vitae erat  
        
                                                ac ligula semper condimentum. Aliquam leo purus, molestie eu, ornare in, hendrerit sed, enim.  
        
                                                Nulla facilisi. Mauris velit arcu, tristique ac, eleifend sed, lobortis a, purus. Nunc porttitor  
        
                                                placerat enim. Etiam malesuada placerat velit. Curabitur in velit. Morbi sagittis nibh id quam.  
        
                                                Vivamus bibendum purus in turpis. Vestibulum sit amet lectus vitae justo tincidunt tristique.  
        
                                                Maecenas eu neque sed massa bibendum viverra. 
        
                                            </p> 
        
                                            <p style="color:White; margin: 10px 5px 10px 5px;"> 
        
                                                Sed id velit. In consectetuer, urna non tempus semper, ipsum eros ultrices ipsum, id condimentum  
        
                                                nisl nisi at nisl. Mauris faucibus nulla non neque. Donec a sapien. Nullam a mauris ut turpis  
        
                                                commodo laoreet. Vivamus eget libero ut nunc iaculis tincidunt. Fusce vulputate, arcu eget gravida 
        
                                                blandit, justo urna luctus tellus, convallis placerat erat diam eu est. Lorem ipsum dolor sit amet,  
        
                                                consectetuer adipiscing elit. Phasellus enim justo, vestibulum ut, mollis eu, tincidunt sed, pede.  
        
                                                Cras lacus. Integer ultrices velit. Donec sagittis venenatis lacus. Vivamus quis mi. Fusce nulla.  
        
                                                Aliquam ipsum nunc, gravida in, ultrices ut, pulvinar et, arcu. 
        
                                            </p> 
        
                                        </ItemTemplate> 
        
                                    </telerik:RadPanelItem> 
        
                                </Items> 
        
                            </telerik:RadPanelItem> 
        
                        </Items> 
        
                    </telerik:RadPanelBar> 
        
                </form> 
        
            </body> 
        
            </html>

I hope this was helpful.

Regards,
Kevin Babcock

Accepted

answered on 23 Jul 2008, 09:07 PM

Hi Mac,

Yes, the no wrapping is happening because of a CSS element setting in the skin stylesheet. If you'd like to use a skin but its not wrapping your text, you can add a CssClass to the RadPanelBar and then in your own CSS set this property:

white-space: normal !important;

In regards to your other questions, yes we use our own custom code to generate the Code Viewer you see at the bottom of the demo pages. The good news is those demos are installed along with the controls, so you can easily access them on your own computer and see how the demo pages are implemented. Simply navigate to the Live Demos folder underneath your product installation folder.

I hope this helps.

Regards,
Kevin Babcock