I came across jQuery UI's Accordion feature which has just made life so much easier. However, I have a situation where I want multiple sections open at the same time. I know I could use something other than Accordion, but I want to keep the consistency in appearance as I've used it in multiple places across the site.
Here's how my scripts, links, and the <div class="accordion"> sections are set up.
$(function ()
{
$("#accordion").accordion
({
collapsible: true, //Allows currently opened section to be collapsed when true
active: false, //Has all sections collapsed by default on page load when false
heightStyle: "content",
header: "> div > h5"
})
});<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script type="text/javascript"
language="javascript"
src="https://code.jquery.com/jquery-3.7.1.js">
</script>
<script type="text/javascript"
language="javascript"
src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript"
language="javascript"
src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js">
</script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js">
</script>
<link href="~/css/datatablsyle.css"
rel="stylesheet" />
<link href="~/lib/bootstrap/dist/css/bootstrap.css"
rel="stylesheet" />
<link href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"
rel="stylesheet">
<link href="/resources/demos/style.css"
rel="stylesheet">
</head>
<body>
<div id="accordion">
<div id="group">
<h5 id="headerCSSName">Header Title</h5>
<div>
//Section Content Here
</div>
</div>
</div>
</body>I originally tried just sticking each section in its own accordion. However, all that did was create one section with the accordion features and appearance and the others were simply displayed as they'd be without it. Next, I tried removing the <div id="group">, but that didn't change anything.
I also tried the different suggestions found on this older question about the same topic, however, they either resulted in the same outcome as using multiple accordions or created the multiple sections but none of them will open.
Does anyone have any experience with this and can provide some insight into how I can get the desired result? If there's any further information I can provide to help clarify, please let me know.