Menu
I was trying to work with the jquery accordion. I'm using the jsfiddle which is in this question : jQuery UI Accordion Expand/Collapse All
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaneka Extranet CustomerDocs</title>
<link href="/Content/screen.css" rel="stylesheet"/>
<link href="/Content/fonts.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="http://use.typekit.com/omm2ava.js"></script>
<script type="text/javascript"> try { Typekit.load(); } catch (e) { }</script>
</head>
<body class="page">
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false
});
var icons = $(".accordion").accordion("option", "icons");
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
}).show();
$(this).attr("disabled", "disabled");
$('.close').removeAttr("disabled");
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
$(this).attr("disabled", "disabled");
$('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
$('.open').removeAttr("disabled");
$('.close').removeAttr("disabled");
});
$('h1:eq(0)').trigger('click');
$('h2:eq(0)').trigger('click');
});
</script>
<style type="text/css">
.accordion-expand-holder {
margin: 10px 0;
}
.accordion-expand-holder .open, .accordion-expand-holder .close {
margin: 0 10px 0 0;
}
</style>
<div class="bgborder-top"></div>
<div id="container">
<div id="header">
<a id="kanekalogo" href="/"><img src="/images/logo_kaneka.png" alt="" /></a>
<div id="topnav"></div>
<div id="top">
<div id="breadcrumbs">
<a href="/" title="Home">Home</a>
>
Documents
</div>
</div>
</div>
<div id="leftcontainer">
<a id="clientlogin" href="/Account/Login">Client Login</a>
</div>
<div id="content">
<h1>Documents Overview</h1>
Welcome [email protected]<br />
<div class="accordion-expand-holder">
<div class="form-row">
<table>
<tr>
<td>
<form action="/Documents" method="post"> <p>
<label for="SearchCriteria">Search</label>
<input id="SearchCriteria" name="SearchCriteria" type="text" value="" />
<input type="image" width="25" src="/Images/search-icon.png" alt="Search documents" title="Search Documents">
</p>
</form> </td>
<td>
<input type="image" width="25" src="/Images/expandAll.png" alt="Expand All" title="Expand All" class="open">
</td>
<td>
<input type="image" width="25" src="/Images/collapseAll.png" alt="Collapse All" title="Collapse All" class="close">
</td>
</tr>
</table>
</div>
</div>
<div class="accordion">
<h1>High Performance Polymers</h1>
<div>
<div class="accordion">
<h1>Safety Data Sheet</h1>
<div>
Here comes text.
</div>
</div>
<div class="accordion">
<h1>Technical Data Sheet</h1>
<div>
Here comes somes other text
</div>
</div>
</div>
</div>
<div class="accordion">
<h1>Eperan</h1>
<div>
<div class="accordion">
<h1>Safety Data Sheet</h1>
<div>
Here comes some ohter text
</div>
</div>
<div class="accordion">
<h1>Technical Data Sheet</h1>
<div>
Some other text.
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div id="footer" class="bgborder-bottom">
<div id="footer-container"></div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"InternetExplorer","requestId":"09c25ea2edd34132bcec5a536592ad9c"}
</script>
<script type="text/javascript" src="http://localhost:6824/5b10ce23a3a348e29f74f46dd49ecc51/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
https://jsfiddle.net/bschelkens/5w3Lb9pv/14/
Above is wat my page looks like. For some reason when i try my fiddle, it does what I'm expecting. But in my code this doesn't work.
532
remove active:false it will open first option by default.
see DEMO
$("#accordion").accordion({
collapsible:true,
});
second option with active:false. trigger click event at the end of code.
$('h3:eq(0)').trigger('click');
see DEMO
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
