Thursday, 6 November 2014

MVC Jquery UI accordion expand/collaspe all in ASP.NET

Hi friends,in this article I will explain about How to MVC Jquery UI accordion expand/collaspe all in ASP.NET.
In previous articles I explained about JQuery UI Datepicker Calender Control In Asp.Net Mvc Application , How to pass or send List from Controller to View in ASP.NET using C# and  File Upload in ASP.Net MVC application
write the below code in the controller.
Controller(AccordionController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCJqueryUIaccordion.Controllers
{
    public class AccordionController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

    }
}

View(Index.cshtml):
@{
    ViewBag.Title = "MVC Jquery UI accordion expand/collaspe all";
}
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<h2>
    MVC Jquery UI accordion expand/collaspe all</h2>
<script type='text/javascript' language="javascript">
    $(function () {
        var HideShow = $('#accordion .accordion-header');
        var divContent = $('#accordion .ui-accordion-content ').hide();
        var ExpandCollapse = $('.ExpandCollapseAll');

        HideShow.click(function () {
            var panel = $(this).next();
            var isOpen = panel.is(':visible');

            panel[isOpen ? 'slideUp' : 'slideDown']()
                .trigger(isOpen ? 'hide' : 'show');

            return false;
        });

        ExpandCollapse.click(function () {
            var isAllOpen = $(this).data('isAllOpen');

            divContent[isAllOpen ? 'hide' : 'show']()
                .trigger(isAllOpen ? 'hide' : 'show');
        });

        divContent.on({
            show: function () {
                var isAllOpen = !divContent.is(':hidden');
                if (isAllOpen) {
                    ExpandCollapse.text('Collapse All')
                        .data('isAllOpen', true);
                }
            },
            hide: function () {
                var isAllOpen = !divContent.is(':hidden');
                if (!isAllOpen) {
                    ExpandCollapse.text('Expand all')
                    .data('isAllOpen', false);
                }
            }
        });
    });

</script>
<p>
    <a class="ExpandCollapseAll" href="#">Expand all</a>
</p>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>MVC
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <ol>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/10/mvc-file-upload-in-aspnet-mvc.html">
                MVC : File Upload in ASP.Net MVC application || How to Upload and delete Uploaded
                file in MVC</a> </li>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/10/mvcjquery-ui-datepicker-calender.html">
                MVC:JQuery UI Datepicker Calender Control In Asp.Net Mvc Application || How to Use
                jQuery Calender In MVC3</a> </li>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/10/mvc-3how-to-pass-or-send-list-from.html">
                How to pass or send List from Controller to View</a> </li>
        </ol>
    </div>
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>ASP.NET
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <ol>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/10/creating-dynamic-css-menu-from-database.html">
                Creating Dynamic CSS Menu From Database SQL Server in ASP.Net Using C#.Net/VB.NET</a>
            </li>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/10/jquery-send-pass-data-values-from-one.html">
                How to Search GridView records (data) on TextBox KeyPress using jQuery in ASP.NET
                using C#/VB.NET</a> </li>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/10/search-gridview-records-data-on-textbox.html">
                JQuery: Send (Pass) Data (Values) from one page to another using Form Post </a>
            </li>
        </ol>
    </div>
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>JQuery
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <ol>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/09/validate-check-file-size-before-upload.html">
                How to validate (check) File Size before upload using jQuery in ASP.NET</a>
            </li>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/09/preview-image-before-upload-using.html">
                how to preview image before upload using FileUpload control and jQuery in ASP.NET</a>
            </li>
            <li><a href="http://aspdotnet-kishore.blogspot.in/2014/05/jqueryhow-to-add-events-in-gridview.html#more">
                Jquery:How to add events in gridview using Jquery || Handling GridView event(RowCommand)</a>
            </li>
        </ol>
    </div>
</div>


The output of the above code as shown in the below figure.


When we click on Expand All then all tabs will be Expand all.


You can download the code by clicking on the below Download button. 


No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.