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.
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.
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