I have an accordion layout in jQuery with one section that has become rather large. I need to be able to click the different sections and have the accordion open and the scroll bar on the right be all the way to the top of the right of the page. I tried the but that doesn't work and breaks the accordion. How can I click a link and have the accordion stay at the top of the page?
code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="demo/dialog.css" media="screen" />
<link rel="stylesheet" type="text/css" href="fixed-box/fixed-box/style-accordion.css" media="screen"/>
<script>
$(document).ready(function()
{
$('#other').change(function()
{
$('#otherrace').parent().toggle(this.checked).focus();
});
$("#toggleElement").change(function() {
$('input[name=living]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#accordion").accordion();
$('[name*="race"]').click(function() { $('#otherrace').css('visibility', $('#other').attr('checked') ? 'visible':'hidden'); });});$(document).ready(function() {
$('[name*="RadioGroup1"]').click(function() {
$('#RadioGroup1_11').css('visibility', $('#RadioGroup1_10').attr('checked') ? 'visible':'hidden');
});
});
</script>
</head>
<body style="font-size:75%" >
<div id="centerColumn">
<div id="accordion">
<h6><i can't post one than one link>Demographcis</a></h6>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<th width="18%" scope="row">Last Name</th>
<td width="31%"><form name="form1" method="post" action="">
<input type="text" name="textfield" id="textfield" maxlength="20">
</form></td>
<td width="4%"> </td>
<td width="47%"> </td>
</tr>
<tr>
<th scope="row">Middle Initial</th>
<td><form name="form2" method="post" action="">
<input type="text" size="3" maxlength="1" name="textfield2" id="textfield2">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">First Name</th>
<td><form name="form3" method="post" action="">
<input type="text" name="textfield4" id="textfield4" maxlength="20">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Address</th>
<td><form name="form4" method="post" action="">
<input type="text" size="35" name="textfield5" id="textfield5" maxlength="35">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Rural Route#</th>
<td><form name="form5" method="post" action="">
<input type="text" name="textfield6" id="textfield6" maxlength="8">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">City</th>
<td><form name="form6" method="post" action="">
<input type="text" name="textfield7" id="textfield7" maxlength="20">
</form></td>
<td>State</td>
<td><form name="form7" method="post" action="">
<input type="text" size="2" maxlength="3" name="textfield8" id="textfield8">
ZIP
<input type="text" maxlength="5" size="6" name="textfield9" id="textfield9">
</form></td>
</tr>
<tr>
<th scope="row">DOB</th>
<td><form name="form8" method="post" action="">
<input type="text" size="11" maxlength="10" name="textfield10" id="textfield10">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Phone</th>
<td><form name="form9" method="post" action="" >
<input type="text" size="12" maxlength="13" name="textfield11" id="textfield11">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Gender</th>
<td><form name="form10" method="post" action="">
<p>
<input type="radio" name="Gender" value="female" id="Gender_0">
Female
<br>
开发者_开发知识库 <input type="radio" name="Gender" value="male" id="Gender_1">
Male
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Race/Ethnicity</th>
<td>
<p>
<input type="checkbox" name="race_" value="asian" id="race_0">
Asian
<br>
<input type="checkbox" name="race_" value="white" id="race_1">
White
<br>
<input type="checkbox" name="race_" value="black" id="race_2">
Black
<br>
<input type="checkbox" name="race_" value="latino" id="race_3">
Latino
<br>
<input type="checkbox" name="race_" value="island" id="race_4">
Pacific Islander
<br>
<input type="checkbox" name="race_" id="other"value="other" />Other, specify<br />
<div style="display:none" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
<br>
</p>
<input type="text" style="display:none;" name="race_" value="other1" id="otherrace">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Living Arragenments</th>
<td><form name="form11" method="post" action="">
<p>With whom do you live? Choose all that apply<br/>
<input type="checkbox" name="living" value="alone" id="living">
Live alone
<br>
<input type="checkbox" name="living" value="husband" id="living">
Husband
<br>
<input type="checkbox" name="living" value="partner" id="living">
Partner
<br>
<input type="checkbox" name="living" value="children" id="living">
Children
<br>
<input type="checkbox" name="living" value="parents" id="living">
Parents
<br>
<input type="checkbox" name="living" value="other_relatives" id="living">
Other relatives
<br>
<input type="checkbox" name="living" value="religion" id="living">
Religious order
<br>
<input type="checkbox" name="living" value="no_answer"
id="toggleElement">
Choose not to answer
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Education</th>
<td>Highest level of education:<br/>
<form name="form12" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="less_high" id="RadioGroup1_0">
Less than high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_high" id="RadioGroup1_1">
Some high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="high" id="RadioGroup1_2">
High school diploma</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="ged" id="RadioGroup1_3">
GED</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_college" id="RadioGroup1_4">
Some college</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="votech" id="RadioGroup1_5">
Vocational or technical</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="associates" id="RadioGroup1_6">
Associates degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="bachelor" id="RadioGroup1_7">
Bachelor's degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="postgrad" id="RadioGroup1_8">
Post graduate training</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="no_answer_school" id="RadioGroup1_9">
Choose not to answer</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="other_ed"
id="RadioGroup1_10">
Other<br/></label>
<div id="RadioGroup1_9"> <input style="visibility:hidden" type="text" name="fname" size="25" maxlength="25" id="RadioGroup1_11" /></div>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Insurance</th>
<td>Choose your insurance-check all that apply<br>
<form name="form13" method="post" action="">
<p>
<label>
<input type="checkbox" name="insurance" value="privateins" id="insurance_0">
Private/HMO/PPO</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicaid" id="insurance_1">
Medicaid</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicare" id="insurance_2">
Medicare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="va" id="insurance_3">
VA/Tricare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noins" id="insurance_4">
No insurance</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noknowins" id="toggleInsurance">
</label>
<label>Choose not to answer</label>
<br>
<label>
<input type="checkbox" name="insurance" value="no_ans_ins" id="insurance_6">
</label>
Do not know<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Income</th>
<td>Gross income of your household<br>
<form name="form14" method="post" action="">
<p>
<label>
<input type="radio" name="income" value="tenk" id="income_0">
Less than $10,000</label>
<br>
<label>
<input type="radio" name="income" value="fifteenk" id="income_1">
Less than $15,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyk" id="income_2">
Less than $20,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyfivek" id="income_3">
Less than $25,000</label>
<br>
<label>
<input type="radio" name="income" value="thirtyfivek" id="income_4">
Less than $35,000</label>
<br>
<label>
<input type="radio" name="income" value="fiftyk" id="income_5">
Less than $50,000</label>
<br>
<label>
<input type="radio" name="income" value="seventyfivek" id="income_6">
Less than $75,000</label>
<br>
<label>
<input type="radio" name="income" value="dontknow" id="income_7">
I don't know</label>
<br>
<label>
<input type="radio" name="income" value="no_answer_income" id="income_8">
Choose not to answer</label>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<h3><i can't post one than one link>Injury Information</a></h3>
<div>
<p>
blahlbalh
</p>
</div>
</div>
</div>
</body>
</html>
You can bind events to your accordion, either on the object or when you create it.
So change your $('#accordion').accordion(); to
$('#accordion').accordion({
changestart: function() {
window.scrollTo(0, 0);
}
});
The changestart event will fire every time the accordion changes (on click or what your event for it is).
Try
object.scrollIntoView(); // moves the viewport
or
window.scrollTo(0,0); // scrolls the window
hard to guess where based on your post, but perhaps
$('[name*="RadioGroup1"]').click(function() {
$(this).scrollIntoView();
Or have a look here: How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论