How to close another element when another element is clicked

Question

I'm trying to display a menu when I click a link and if another menu is open close it before displaying the other menu. In other words like an accordion menu, but I only need one menu open at a time. So far everything I tried does not work. I don't know Jquery to well but I will post my code that I have so far.

HTML

    <nav id="cat">
        <ol>
            <li><a title="" href="#1">1;</a></li>
            <li><a title="" href="#2">2</a></li>
            <li><a title="" href="#3">3</a></li>
            <li><a title="" href="#4">4</a></li>
            <li><a title="" href="#5">5</a></li>
        </ol>
    </nav>


    <nav class="sub">
        <ol id="1">
            <li><a title="" href="">1a</a></li>
        </ol>
    </nav>

    <nav class="sub">
        <ol id="2">
            <li><a title="" href="">2a</a></li>
        </ol>
    </nav>

    <nav class="sub">
        <ol id="3">
            <li><a title="" href="">3a</a></li>
        </ol>
    </nav>

    <nav class="sub">
        <ol id="4">
            <li><a title="" href="">4a</a></li>
        </ol>
    </nav>

    <nav class="sub">
        <ol id="5">
            <li><a title="" href="">5a</a></li>
        </ol>
    </nav>

JQuery

$('.sub').hide();
$('#cat > ol > li > a').click(function(){
    var hrefSuffix = $('a').attr('href').split('#')[1];
    $('.sub > ol').attr(hrefSuffix).slideDown('slow');
    $('.sub').find('ol[id=' + hrefSuffix ']').slideUp('slow');
});

Answer 1

add class on opened menu item, then, when you open another item, find previous by added class, hide it and remove class.

$(.menu-item).on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var $this = $(this);
    if($this.hasClass('opened')){
        return;
    }
    $('.opened').slideUp('slow').removeClass('opened');
    $this.slideDown('slow').addClass('opened');
});

Answer 2

It is a classic accordion implementation, You can make some tweaks like below.

 var $subs = $('.sub'); $('#cat > ol > li > a').click(function() { var href = $(this).attr('href'), $target = $(href); $target.stop().slideToggle('slow'); $subs.not($target).stop().slideUp('slow'); }); 

 .sub { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="cat"> <ol> <li><a title="" href="#1">1;</a></li> <li><a title="" href="#2">2</a></li> <li><a title="" href="#3">3</a></li> <li><a title="" href="#4">4</a></li> <li><a title="" href="#5">5</a></li> </ol> </nav> <nav class="sub" id="1"> <ol> <li><a title="" href="">1a</a></li> </ol> </nav> <nav class="sub" id="2"> <ol> <li><a title="" href="">2a</a></li> </ol> </nav> <nav class="sub" id="3"> <ol> <li><a title="" href="">3a</a></li> </ol> </nav> <nav class="sub" id="4"> <ol> <li><a title="" href="">4a</a></li> </ol> </nav> <nav class="sub" id="5"> <ol> <li><a title="" href="">5a</a></li> </ol> </nav> 

Answer 3

In your case the accordion needs to be like this

HTML:

<ul class="accordion">
    <li>
        <a href="javascript:void(0);">First Item</a>
        <div class="panel">
            <p>First Item content goes here</p>
        </div>
    </li>
    <li>
        <a href="javascript:void(0);">Seccond Item</a>
        <div class="panel">
            <p>Seccond Item content goes here</p>
        </div>
    </li>
    <li>
        <a href="javascript:void(0);">Third Item</a>
        <div class="panel">
            <p>Third Item content goes here</p>
        </div>
    </li>
</ul>

CSS:

.accordion{padding:0px;margin:0px;list-style:none;}
.accordion li{margin-bottom:5px;}
.accordion a{padding:10px;background:#eaeaea;display:block;}
.accordion .panel{display:none;}

JS:

$(document).ready(function(){
    $(".accordion a").on('click', function(){
        var $allPanel = $(".accordion .panel");
        var $currentPanel = $(this).next('.panel');
        if($currentPanel.is(":hidden")){
            $(this).next('.panel').slideDown('fast');
        }else{
            $(this).next('.panel').slideUp('fast');   
        }
        $allPanel.not($currentPanel).slideUp('fast');
    });
});

Created a fiddle here , hope this is what you needed.