normally in accordion jquery when we click div2, div1 colapses and div1 expandes..My objective is to not to colapse div1.Actually my requirement is some thing like as soon as i will click the divs, the div will remain expanded the div will only colapses
when i colapse it..How can i do plz help!!
At the jQuery website, it states the this is NOT the correct control to do this, it requirs lots of hacking. There also give a solution how you could do that
actually i have a button on cliking filteration of data will happen.Basically i have 3 accordians.I want to keep the accordian div open which has data..
$('#dvfilter1').slideDown('slow');
This keeps the div open wich has data but the up arrow image should also be converted to down arrow image .plz help me..
$("#btnFilter").click(function () {
$("#dvAjaxImg").css('display', 'block');
$.ajax({
type: "POST",
url: "Home/FilterData",
data: "{ 'address':'" + $('#txtAddress').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$("#dvAjaxImg").css('display', 'none');
var GetValue = new Array();
suvo
Member
2 Points
255 Posts
how to make the divs remain expanded in accordion jquery
Oct 16, 2012 07:00 PM|LINK
normally in accordion jquery when we click div2, div1 colapses and div1 expandes..My objective is to not to colapse div1.Actually my requirement is some thing like as soon as i will click the divs, the div will remain expanded the div will only colapses when i colapse it..How can i do plz help!!
Feron.IT
Member
12 Points
2 Posts
Re: how to make the divs remain expanded in accordion jquery
Oct 16, 2012 07:08 PM|LINK
Hello,
At the jQuery website, it states the this is NOT the correct control to do this, it requirs lots of hacking. There also give a solution how you could do that
suvo
Member
2 Points
255 Posts
Re: how to make the divs remain expanded in accordion jquery
Oct 31, 2012 06:34 AM|LINK
asteranup
All-Star
30184 Points
4906 Posts
Re: how to make the divs remain expanded in accordion jquery
Oct 31, 2012 06:48 AM|LINK
Hi,
Try this-
http://forums.asp.net/p/1850307/5175555.aspx/1?Re+Jquery+Accordion+Issue
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
suvo
Member
2 Points
255 Posts
Re: how to make the divs remain expanded in accordion jquery
Oct 31, 2012 09:11 AM|LINK
i want to achieve this functionality
http://jsfiddle.net/asteranup/gE23b/
with accordion jquery
can it be possible..??
asteranup
All-Star
30184 Points
4906 Posts
Re: how to make the divs remain expanded in accordion jquery
Oct 31, 2012 11:09 AM|LINK
Hi,
jQuery accordian plugin is meant to open one tab at a time only. If you want to use this just change the CSS to match the jquery ui.
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
suvo
Member
2 Points
255 Posts
Re: how to make the divs remain expanded in accordion jquery
Nov 25, 2012 08:11 AM|LINK
ya ultimately i got an usefull link
http://jsfiddle.net/DkHyd/
actually i have a button on cliking filteration of data will happen.Basically i have 3 accordians.I want to keep the accordian div open which has data..
$('#dvfilter1').slideDown('slow');
This keeps the div open wich has data but the up arrow image should also be converted to down arrow image .plz help me..
$("#btnFilter").click(function () {
$("#dvAjaxImg").css('display', 'block');
$.ajax({
type: "POST",
url: "Home/FilterData",
data: "{ 'address':'" + $('#txtAddress').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$("#dvAjaxImg").css('display', 'none');
var GetValue = new Array();
GetValue = response.split("~")
// alert(GetValue[0]);
$('#dvfilter1').html("");
$('#dvfilter1').html(GetValue[0]);
$('#dvfilter1').slideDown('slow');
$('#dvfilter2').html("");
$('#dvfilter2').html(GetValue[1]);
$('#dvfilter2').slideDown('slow');
$('#dvfilter3').html("");
$('#dvfilter3').html(GetValue[2]);
$('#dvfilter3').slideDown('slow');
},
failure: function (errMsg) {
$('#errorMessage').text(errMsg); //errorMessage is id of the div
}
});
});
<style>
.ajax
{
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
display: block;
left: 40%;
position: absolute;
top: 50%;
width: 500px;
height: 90px;
z-index: 999;
}
</style>
public ActionResult FilterData(string address)
{
var emp = EmployeeRepo.GetEmployees();
var filter1= emp.Where(r => r.address == "Kolkata" && r.designation == "man");
var filter2 = emp.Where(r => r.address == "Kolkata" && r.designation == "des2");
var filter3 = emp.Where(r => r.address == "Kolkata" && r.designation == "des1");
System.Text.StringBuilder sbHtml = new System.Text.StringBuilder();
foreach (Employee item in filter1)
{
sbHtml.Append("employeeId " + item.employeeId);
sbHtml.Append(" | employeeName " + item.employeeName);
sbHtml.Append(" | address " + item.address);
sbHtml.Append(" | age " + item.age);
sbHtml.Append("<br/>");
}
sbHtml.Append("~");
foreach (Employee item in filter2)
{
sbHtml.Append("employeeId " + item.employeeId);
sbHtml.Append(" | employeeName " + item.employeeName);
sbHtml.Append(" | address " + item.address);
sbHtml.Append(" | age " + item.age);
sbHtml.Append("<br/>");
}
sbHtml.Append("~");
foreach (Employee item in filter3)
{
sbHtml.Append("employeeId " + item.employeeId);
sbHtml.Append(" | employeeName " + item.employeeName);
sbHtml.Append(" | address " + item.address);
sbHtml.Append(" | age " + item.age);
sbHtml.Append("<br/>");
}
sbHtml.Append("~");
var strhtml = sbHtml.ToString();
return Json(strhtml, JsonRequestBehavior.AllowGet);
//return View();
}
suvo
Member
2 Points
255 Posts
Re: how to make the divs remain expanded in accordion jquery
Dec 02, 2012 07:06 AM|LINK
ultimately after lots of findings i got it..
A header id has to be provided to the accordian divs.and to make it expanded after filteration we have to
$("#dvPA").toggle();
$('#headerPA').find(".ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end().next();
suvo
Member
2 Points
255 Posts
Re: how to make the divs remain expanded in accordion jquery
Dec 16, 2012 04:47 PM|LINK
I could lock the page while processing..i modified my ajax script and added css to lock it
<div id="dvAjax" style="display: none">
<div id="blur">
</div>
<div id="progress">
<img src="../../images/loading.gif" />
</div>
</div>
<style>
.ajax
{
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
display: block;
left: 40%;
position: absolute;
top: 50%;
width: 500px;
height: 90px;
z-index: 999;
}
#blur
{
width: 200%;
background-color: black;
moz-opacity: 0.5;
khtml-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
z-index: 120;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#progress
{
z-index: 200;
background-color: White;
position: absolute;
top: 0pt;
left: 0pt;
border: solid 1px black;
padding: 5px 5px 5px 5px;
text-align: center;
}
</style>
$("#btnFilter").click(function () {
$.ajax({
type: "POST",
url: "Home/FilterData",
data: "{ 'address':'" + $('#txtAddress').val() + "'}",
beforeSend: function () {
// Show your spinner
$("#dvAjax").css('display', 'block');
LockPage();
},
complete: function () {
// Hide your spinner
$("#dvAjax").css('display', 'none');
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var GetValue = new Array();
GetValue = response.split("~")
$('#dvfilter1').html("");
$('#dvfilter1').html(GetValue[0]);
$("#dvfilter1").toggle();
$('#headerdvfilter1').find(".ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end().next();
},
failure: function (errMsg) {
$('#errorMessage').text(errMsg); //errorMessage is id of the div
}
});
});
function LockPage() {
if (document.getElementById) {
var progress = document.getElementById('progress');
var blur = document.getElementById('blur');
progress.style.width = '300px';
progress.style.height = '30px';
blur.style.height = document.documentElement.clientHeight;
progress.style.top = document.documentElement.clientHeight / 3 - progress.style.height.replace('px', '') / 2 + 'px';
progress.style.left = document.body.offsetWidth / 2 - progress.style.width.replace('px', '') / 2 + 'px';
}
}