I successfully implemented a jQuery accordion feature in my project, which allows for "open accordion based on current URL" and "highlighted current articles".
Initially, everything was working fine. However, I encountered an issue when adding two additional JS files to the project.
Combining these JS files resulted in a large file size of 67KB, which is quite hefty for a JS file.
Asking for suggestions on possible alternatives or optimizations we could explore.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({
active: false,
collapsible: true,
autoHeight: false,
navigation: true,
header: '.menuitem'
});
$(".menuitem").click(function(event){
window.location.hash=this.hash;
});
$(".closelink").click(function(event){
$("#accordion").accordion({
active: false,
});
});
});
$(function(){
var current1 = window.location.href;
$(".nav li a[href*='"+current1+"']").parents("li").addClass("current");
});
</script>
HTML
<div id="accordion">
<h3 class="menuitem" href="#1">FIRST SECTION</h3>
<!-- accordion panel -->
<div class="panelBody">
<ul class="nav menuside">
<li><a href="http://www.guru99.com/software-testing-introduction-importance.html">Introduction</a></li>
<li><a href="http://www.guru99.com/software-testing-seven-principles.html">Seven Principles</a></li>
<li><a href="http://www.guru99.com/software-testing-lifecycle.html">SDLC vs STLC</a></li>
<li><a href="http://www.guru99.com/software-testing-life-cycle.html">Testing Life Cycle</a></li>
<li><a href="http://www.guru99.com/manual-testing.html">Manual Testing</a></li>
</ul>
<!-- end accordion panel -->
</div>
<h3 class="menuitem" href="#2">SECOND SECTION</h3>
<!-- accordion panel -->
<div class="panelBody">
<ul class="nav menuside">
<li><a href="http://www.guru99.com/software-testing-techniques-3.html">Use Case Testing</a></li>
<li><a href="http://www.guru99.com/testing-review.html">Static Testing</a></li>
<li><a href="http://www.guru99.com/testing-estimation.html">Estimation Techniques</a></li>
<li><a href="http://www.guru99.com/test-plan.html">Test Plan Document</a></li>
<li><a href="http://www.guru99.com/software-defect.html">What is Bug</a></li>
</ul>
<!-- end accordion panel -->
</div>
<!-- end accordion -->
</div>