Expand and Collapse in Panel bar div

[DHHS]

Hi,

 I am trying to do the below demo :

http://demos.telerik.com/aspnet-mvc/sortable/sortable-panels

 

I am not interested in the panel. All I want is a div which is expandable and collapsible. ​But i don't see anything working, when i copy all the code as it is. I have tried only the div i want and tried but still it is not working. I don't see k-i-arrowhead-n , I have the latest version.  I have all css too.

 

<div class="panel-wrap">
    <div id="main-content">
        <div id="news" class="widget">
            <h3>News <span class="collapse k-icon k-i-arrowhead-n"></span></h3>
            <div>

                <h4><span>Jan 22, 2014</span> Stanford Speaker Series Looks at the Rising Tide of Eastern European High Tech Firms with Telerik CEO Vassil Terziev</h4>

                <h4><span>Dec 10, 2013</span> Telerik Test Studio Now Offers Cross-Browser Test Recording and Subscription-Based Pricing for 1M-Strong Developer Community</h4>

                <h4><span>Nov 22, 2013</span> Telerik AD is Named "Best Employer in Bulgaria" for Sixth Consecutive Year</h4>

                <h4><span>Nov 20, 2013</span> Telerik Embraces the Responsive Web with Latest Kendo UI Improvements</h4>
            </div>
        </div>
    </div>
</div>

<script>
   $(document).ready(function () {
            //exapand
            $(".panel-wrap").on("click", "span.k-i-arrowhead-s", function (e) {
                var contentElement = $(e.target).closest(".widget").find(">div");
                $(e.target)
                    .removeClass("k-i-arrowhead-s")
                    .addClass("k-i-arrowhead-n");

                kendo.fx(contentElement).expand("vertical").stop().play();
            });

            //collapse
            $(".panel-wrap").on("click", "span.k-i-arrowhead-n", function (e) {
                var contentElement = $(e.target).closest(".widget").find(">div");
                $(e.target)
                    .removeClass("k-i-arrowhead-n")
                    .addClass("k-i-arrowhead-s");

                kendo.fx(contentElement).expand("vertical").stop().reverse();
            });
        });
</script>

 

 

Thanks,

Veena

[eo]

Hello Veena,

I started a new ​MVC project and copy pasted your code in a new view; the result is a working collapsible div with the news. It lacks style but does what its supposed to. Can you show me how you add the Kendo libraries? Also, what are you getting when you run the application? Is there message in the browser's console?

Thank you.

[DHHS]

Hi,

I created new project like mentioned below website and i copied the whole code in the project index page and ran it got so many errors and expand and collapse was not working too. So i removed everything and just kept the new div and the script, as i posted in my previous thread and copied all the css in the demo website

http://docs.telerik.com/kendo-ui/aspnet-mvc/asp-net-mvc-5

 

But still I am not getting that expand or collapse. I am getting errors when i tried in firebug. I couldn't make the issue, so I have attached screenshot. I have attached both my screens in the attachment. One screen is code and when you roll to right you will see my another screen with my browser and browser errors. 

 

Thanks,

Veena

[eo]

Hi, 

It looks to me like your problems aren't related to the Telerik components themselves. I would suggest trying to solve the console errors one by one. To get you started with the first one I would suggest checking this StackOverlflow post. When all of those are solved we can continue trying to figure out whats preventing the expand/collapse to work; like I said, I'm positive it's not the code in your first post because I tried it myself and it worked as expected.

[DHHS]

Hi eo,

 

Thanks for the fast reply. I haven't done anything. I have created brand new project and followed the steps in here :

http://docs.telerik.com/kendo-ui/aspnet-mvc/asp-net-mvc-5

 

When you see the screenshot, first error is jquery not defined, but on the right hand side you can see that error is coming in the page kendo.all.min.js. and all the errors or from kendo, i believe if i fix first error, remaining errors will get fixed, But I am not sure how to fix the first one too as which jquery file it is referring to. 

Please do let me know if i have missed something. I just followed the same steps given in the link. 

 

Thanks,

Veena

[DHHS]

Hi eo,

Never mind. I used jquery accordion.

 

Thanks,

Veena