I am facing an issue with fixing the position of a div containing an accordion. Whenever I try to fix the position of the div, the accordion stops functioning properly.
<div>
<div style='position:fixed;width:100%;z-index: 10000; top: 0; '>
<div id="main"></div>
</div>
<div id='grid' style='z-index: 10030;'></div>
</div>
Javascript:
$(function() {
var staticDiv = "<div class='accordion-container'> <a class='accordion-toggle'>Heading 1</a> <div class='accordion-content'> Content 1 </div></div><div class='accordion-container'> <a href='#' class='accordion-toggle'>Heading 2</a> <div class='accordion-content'> Content 2 </div></div>"
jQuery("#main").append(staticDiv);
jQuery("#main").append(staticDiv);
$('#grid').css('paddingTop', $('#main').height())
$('.accordion-toggle').on('click', function(event){
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.next('.accordion-content');
// toggle accordion link open class
accordion.toggleClass("open");
// toggle accordion content
accordionContent.slideToggle(250);
});
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [{
name: "Name",
type: "text",
width: 100
}, {
name: "Age",
type: "number",
width: 50
},
countries, {
name: "Cool",
type: "checkbox",
width: 40,
title: "Is Cool",
sorting: false
}, {
type: "control"
}
]
})
})
For more information and context, you can visit this link. According to a discussion on the jQuery forum, it is recommended to wrap the accordion in another div with fixed positioning, but unfortunately, it is not working in my particular case