Expand all menus and close them

Question

I'm trying to make a jquery script that would expand and close all menus at a click. Also, I would need then to collapse it all.

Here is the code I have written so far:

HTML:

<span class="expand"><span class="plus"><a href="javascript:;"><img src="/images/icons/icon-plus.png" /></a></span><span class="minus"><a href="javascript:;"><img src="/images/icons/icon-minus.png" /></a></span></span>

CSS:

    .plus > a > img {
    border: none;
    margin-right: 5px;
    margin-top: 8px;
    display: block;
}
.minus {
    display: none;

jQuery:

$(document).ready(function(){
    $('plus').on('click' , function() {
        $('.first-tab-at services-top services-top-toggle').toggle();
    });
});

So, when the "plus" image is clicked I need the menus to be expanded and then the "minus" image would appear on the "plus" position. Clicking the "minus" image would collapse the menus.

I want to expand and collapse more than one menu at one click with this.

Answer 1

I can't see what the toggle command will achieve as it doesn't relate to the posted HTML. However, try this example for what you are trying to achieve with the plus and minus icons - https://jsfiddle.net/u83nkd3v/

$(document).ready(function () {
    $('.plus a img').on('click', function () {
        console.log('plus clicked');
        $('.first-tab-at services-top services-top-toggle').toggle();
        $('.plus').hide();
        $('.minus').show();
    });
    $('.minus a img').on('click', function () {
        console.log('minus clicked');
        $('.first-tab-at services-top services-top-toggle').toggle();
        $('.minus').hide();
        $('.plus').show();
    });
});

Answer 2

The code below is one of several ways to achieve what you want. you were missing a full stop from $('.plus').on('click', function() { which wouldn't have helped you

 $(document).ready(function() { $('.plus').on('click', function() { $('ul').removeClass('hidden'); $('.minus').show(); $('.plus').hide(); }); $('.minus').click(function() { $('ul').addClass('hidden'); $('.plus').show(); $('.minus').hide(); }); }); 

 .plus > a > img { border: none; margin-right: 5px; margin-top: 8px; display: block; } .minus { display: none; } .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span class="expand"> <span class="plus"> <a href="javascript:;"> <img src="/images/icons/icon-plus.png" /> </a> </span> <span class="minus"> <a href="javascript:;"> <img src="/images/icons/icon-minus.png" /> </a> </span> <ul id="1" class="hidden"> <li>1</li> <li>2</li> </ul> <ul id="2" class="hidden"> <li>3</li> <li>4</li> </ul> </span>