How To Make an Accordion using Kendo UI based on Form

[md]

I want to make just like Accordion which is uploaded and I tried several time to make an accordion just like given image or window using Kendo UI panelbar tool. But it did not work. I need your support to solve this issue by using Kendo UI panelbar.

[Nencho]

Hello,

Could you please specify what is the exact issue that you are facing? The needed widgets and labels  should be placed within the div element of each PanelBar item, in order to include them under each item.

I am looking forward to your reply.

Regards,
Nencho
Telerik by Progress

[md]

I need to use PanelBar with Animation effects. In this panelbar, i have to set multiple input box just like given image. I did use panelbar using input box, but it did not work and input box always hidden when i ran the page.

 

<div id="example">

 <ul id="panelbar">
   <li>Input By Text
       <ul>
           <li>
           <div class="row">
                <div class="col-sm-12">
         <div class="col-lg-3 col-md-3 col-sm-12 col-xs-6">
                       <div class="control-group">
                           <div class="form-group" id="symbol">
                               <div class="controls ">
                                   <div class="input-prepend input-group">
                                       <span class="input-group-addon input-sm k-primary">Symbol:</span>
                                            <input id="txtSymbol" type="text" class="k-textbox" placeholder="Enter Symbol"   title="Give a symbol."
                                            />
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   
                                             
                           </div>
                   </div>                   
                         </li>
         <li>Sub Item 2</li>
          <li>Sub Item 3</li>
       </ul>
   </li>
   <li>Input By File
       <ul>
           <li>Sub Item 1</li>
           <li>Sub Item 2</li>
           <li>Sub Item 3</li>
       </ul>
   </li>
</ul>

</div>

<script>
$(document).ready(function() {
    $("#panelbar").kendoPanelBar({
        expandMode: "single"
    });
});
</script>

 

[Nencho]

Hello,

Indeed such direct nesting in an item is not a valid scenario, because there is no text before the divs that you use as content. The div element is considered as the content for a given item, however, in the code snippet there is no item to attach the content to. In other words, you should have, for example - SubItem 1 and place the divs after it, so that the content of the divs should be rendered as content to that item.

Please refer to the following dojo example, demonstrating this implementation:

http://dojo.telerik.com/EroNe/4

The <li> elements in certain item are considered as child items, while the div elements are considered as placeholders for content. Hence, without a text to specify/initialize a given item, the content cannot be associated with it (which is why the input is not rendered in your example)

Regards,
Nencho
Telerik by Progress