As mentioned in the title, I have created an accordion that reveals content when clicked on but also hides the side menu dropdown.
Here is a link to an image demonstrating the issue.
I attempted to solve this by adding a z-index of -1 in the CSS, which fixed the problem but made the accordion unclickable.
Adding object.style.zIndex="-1" to the JavaScript did not work and caused the accordion to display all its content at once.
The code snippet below shows the JavaScript used with jQuery UI and a custom theme in the HTML document:
$(function() {
$( "#accordion" ).accordion({
active:false,
collapsible: true
});
});
$(function(){
$("#accordion").accordion({
heightStyle:"fill"
});
});
$(function(){
$( "#accordion-resizer" ).resizable({
minHeight: 140,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});
Below is the CSS being utilized with a small modification that resolved the issue but hindered user interaction:
#accordion-resizer{
padding: 10px;
width: 700px;
height: auto;
}
.ui-widget-content{
z-index:-1;
}
To reiterate, I am using jQuery UI with a personalized theme. I appreciate any assistance provided. Thank you!