I am currently working on enhancing an existing "FAQ" accordion page by implementing the expand/collapse feature to function seamlessly. I have successfully set up the page to begin with all sections collapsed, however, I am facing an issue where clicking on one section to expand it does not collapse the previously expanded section.
It is crucial for me to maintain the search functionality as it is.
$('.collapse').collapse(); // Ensure all sections are collapsed initially
// The following code snippet enables the search functionality.
(function() {
var searchTerm, panelContainerId;
$('#accordion_search_bar').on('change keyup', function() {
searchTerm = $(this).val();
$('#accordion > .panel').each(function() {
panelContainerId = '#' + $(this).attr('id');
// Making the search case-insensitive
$.extend($.expr[':'], {
'contains': function(elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
// End of making search case-insensitive
// Show and Hide triggers based on search input
$(panelContainerId + ':not(:contains(' + searchTerm + '))').hide(); //Hide rows that do not contain the search query.
$(panelContainerId + ':contains(' + searchTerm + ')').show(); //Show rows that match the search query.
});
});
}());
@import url('https://fonts.googleapis.com/css?family=Anton');
body {
background: #29AB87;
background-color: green;
}
h1 {
font-family: 'Anton', sans-serif;
color: #29AB87;
}
/* CSS styles continue... */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<link href="css/style.css" rel="stylesheet">
<body>
<!-- HTML content continues... -->
The current behavior is such that all items start off collapsed, but when a user clicks on a paw icon to expand, the previously expanded item should collapse automatically. This can be achieved by toggling the collapse state of each item.