Recently, I put together a list that includes various pieces of information along with an accordion menu.
Take a look at the list
However, I've encountered a small issue which has left me quite perplexed. When a menu item is clicked - for instance, the animal menu - its corresponding information appears as expected.
My confusion arises when, after viewing the details under one menu, if the user proceeds to click on another menu, such as colors, the previous menu remains open alongside the new one. Ideally, I would like each menu click to close any previously opened menus and display only the content of the selected menu.
Thank you in advance for assisting me in resolving this dilemma.
'use strict';
// search & highlight
;( function( $, window, document, undefined )
{
var $container = $( '.faq' );
if( !$container.length ) return true;
var $input = $container.find( 'input' ),
$notfound = $container.find( '.faq__notfound' ),
$items = $container.find( '> ul > li' ),
$item = $(),
itemsIndexed = [];
$items.each( function()
{
itemsIndexed.push( $( this ).text().replace( /\s{2,}/g, ' ' ).toLowerCase() );
});
$input.on( 'keyup', function( e )
{
if( e.keyCode == 13 ) // enter
{
$input.trigger( 'blur' );
return true;
}
$items.each( function()
{
$item = $( this );
$item.html( $item.html().replace( /<span class="highlight">([^<]+)<\/span>/gi, '$1' ) );
});
var searchVal = $.trim( $input.val() ).toLowerCase();
if( searchVal.length )
{
for( var i in itemsIndexed )
{
$item = $items.eq( i );
if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )
$item.removeClass( 'is-hidden' ).html( $item.html().replace( new RegExp( searchVal+'(?!([^<]+)?>)', 'gi' ), '<span class="highlight">>$&</span>' ) );
else
$item.addClass( 'is-hidden' );
}
}
else $items.removeClass( 'is-hidden' );
$notfound.toggleClass( 'is-visible', $items.not( '.is-hidden' ).length == 0 );
});
})( jQuery, window, document );
// toggling items on title press
;( function( $, window, document, undefined )
{
$( document ).on( 'click', '.faq h2 a', function( e )
{
e.preventDefault();
$( this ).parents( 'li' ).toggleClass( 'is-active' );
});
})( jQuery, window, document );
// auto-show item content when show results reduces to single
;( function( $, window, document, undefined )
{
var $container = $( '.faq' );
if( !$container.length ) return true;
var $input = $container.find( 'input' ),
$items = $container.find( '> ul > li' ),
$item = $();
$input.on( 'keyup', function()
{
$item = $items.not( '.is-hidden' );
if( $item.length == 1 )
$item.addClass( 'js--autoshown is-active' );
else
$items.filter( '.js--autoshown' ).removeClass( 'js--autoshown is-active' );
});
})( jQuery, window, document );body {
font-family: Roboto, sans-serif;
color: #34434b;
background-color: #fff;
padding: 5rem 1.25rem;
direction: rtl;
text-align: right;
/* 80 20 */
}
a {
color: #468FB3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
width: 100%;
max-width: 640px;
/* 960 */
margin: 0 auto;
}
.container h1 {
font-size: 42px;
font-weight: 300;
color: #5594b3;
margin-bottom: 40px;
}
.container h1 a:hover, .container h1 a:focus {
color: #a664b7;
}
.container p {
line-height: 1.6;
}
.faq input {
width: 100%;
height: 60px;
font-size: 20px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(52, 67, 75, 0.2);
display: block;
padding: 0 20px;
margin-bottom: 40px;
-webkit-transition: box-shadow .1s linear;
transition: box-shadow .1s linear;
}
.faq input::-webkit-input-placeholder, .faq input::-moz-placeholder, .faq input:-ms-input-placeholder {
color: #a1bdcb !important;
}
.faq input:focus {
box-shadow: 0px 4px 8px rgba(52, 67, 75, 0.4);
}
.faq .highlight {
background-color: #f00d77;
}
.faq > ul > li:not(:first-child) {
border-top: 1px solid #dcebed;
margin-top: 20px;
padding-top: 20px;
}
.faq > ul > li.is-hidden {
display: none;
}
.faq > ul > li h2 {
font-size: 24px;
font-weight: 700;
}
.faq > ul > li h2:hover, .faq > ul > li h2:focus {
color: #a664b7;
}
.faq > ul > li.is-active h2, .faq > ul > li:target h2 {
color: #a664b7;
}
.faq > ul > li > div {
display: none;
}
.faq > ul > li.is-active > div, .faq > ul > li:target > div {
display: block;
margin-top: 10px;
}
.faq__notfound {
font-size: 20px;
font-style: italic;
display: none;
}
.faq__notfound.is-visible {
display: block;
}
.container footer {
color: #a1bdcb;
margin-top: 40px;
}
.container footer a:hover, .container footer a:focus {
color: #5594b3;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- partial:index.partial.html -->
<div class="container" role="main">
<h1>LIST</h1>
<div class="faq">
<input type="search" value="" placeholder="Type some keywords" />
<ul>
<li id="faq-1">
<h2><a href="#faq-1">Animals</a></h2>
<div>
<p>
cat <br>
dog <br>
lion <br>
tiger <br>
</p>
</div>
</li>
<li id="faq-2">
<h2><a href="#faq-2">Names</a></h2>
<div>
<p>
jim <br>
jack <br>
mary <br>
tom <br>
</p>
</div>
</li>
<li id="faq-3">
<h2><a href="#faq-3">colors</a></h2>
<div>
<p>
blue <br>
red <br>
</p>
</div>
</li>
</ul>
<div class="faq__notfound"><p>No matches were found… Try “giza”.</p></div>
</div>
<footer><p></p></footer>
</div>
<!-- partial -->
<script src='./jquery.min.js'></script><script src="./script.js"></script>