JQuery multiple div switches

Question

OK No one will need a lot of time to figure out what I'm learning jQuery here and maybe take care of it. That's why I'm here, though.

I am creating a menu system based on the "panel", which provides many different functions (menu, filter, search, basket and account). I have 99% where I want to be. Indeed, if you click on the menu icon (as an example), you will see the exact effect. Click it again and everything will be perfect.

My problem arises when the user clicks on another icon with the "panel" open. Now you can see the gaps in my knowledge.

Note that the effect acts on a different div for the panel and in the same div every time (main). Naturally, it would be better if: a) when you click on the new icon without closing the panel, jQuery closes the previous panel, removes close-btn, the slide goes back, and then opens a new panel. or b) it closes the previous panel, removes close-btn, but retains the main openness (I think this complicates).

HTML

<div id="mainpanel"> <div class="menunav"> <div class="toggle menu-btn"></div> <div class="toggle filter-btn"></div> <div class="toggle search-btn"></div> <div class="toggle basket-btn"></div> <div class="toggle account-btn"></div> </div> </div> <div class="togglepanel mainmenu"> menu here </div> <div class="togglepanel filter"> filter here </div> <div class="togglepanel search"> search here </div> <div class="togglepanel basket"> basket here </div> <div class="togglepanel account"> account here </div> <main> content will be here </main> 

CSS

 #mainpanel { position: fixed; display: table; top: 0; left: 0; width: 125px; height: 100%; background: #206ba4; vertical-align: middle; z-index: 9999;} main { position: relative; top: 0; margin-left: 125px; transform: translateX(0); transform: translateY(0); transition: transform .5s;} .move { transform: translateX(300px) !important;} .menunav { display: table-cell; color: #fff; z-index: 1001; margin: 20px 0 0; text-align: center; vertical-align: middle;} .menunav div { display: block; width: 100%; margin: 0 0 30px; text-align: center;} .menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after { font-family: FontAwesome; content: "menu"; font-size: 1.8em; font-weight: 200; color: #fff; display: block; height: 1em; width: 1em; margin: 0 0 0 30%; cursor: pointer;} .filter-btn:after { content: "filter";} .search-btn:after { content: "search";} .basket-btn:after { content: "basket";} .account-btn:after { content: "account";} .close-btn:after { content: "close";} .mainmenu, .filter, .search, .basket, .account { position: fixed; width: 300px; top: 0; left: 125px; height: 100%; background: #54a4de; transform: translateX(-100%); transition: transform .5s; z-index: -1;} .expand { transform: translateX(0px);} 

JQuery

 jQuery(function($){ $('.menu-btn').click(function(){ $('.mainmenu').toggleClass('expand') $('main').toggleClass('move') $('.menu-btn').toggleClass('close-btn') }) }) jQuery(function($){ $( '.filter-btn' ).click(function(){ $('.filter').toggleClass('expand') $('main').toggleClass('move') $('.filter-btn').toggleClass('close-btn') }) }) jQuery(function($){ $( '.search-btn' ).click(function(){ $('.search').toggleClass('expand') $('main').toggleClass('move') $('.search-btn').toggleClass('close-btn') }) }) jQuery(function($){ $( '.basket-btn' ).click(function(){ $('.basket').toggleClass('expand') $('main').toggleClass('move') $('.basket-btn').toggleClass('close-btn') }) }) jQuery(function($){ $( '.account-btn' ).click(function(){ $('.account').toggleClass('expand') $('main').toggleClass('move') $('.account-btn').toggleClass('close-btn') }) }) 

Here is jsfiddle

Thanks a lot, in advance for any pointers .... my head hurts!

Answer 1

DEMO HERE

Lots of redundant code in your attempt, but still a good attempt to achieve this. Below are my suggestions for achieving this.

Tips:

• Do not include multiple jQuery(function , as this is equivalent to the $(document).ready function, and it is good if you have only one js file

• Write one common event for all buttons and divide it by $(this) for every click that occurs

• Add an additional data- * attribute to your .toggle element, let's say data-target , to configure its corresponding panel-body

So, below are some of the changes made to your code.

HTML

 <div class="menunav"> <!--data-target to each of its corresponding body class--> <div class="toggle menu-btn" data-target=".mainmenu"></div> <div class="toggle filter-btn" data-target=".filter"></div> <div class="toggle search-btn" data-target=".search"></div> <div class="toggle basket-btn" data-target=".basket"></div> <div class="toggle account-btn" data-target=".account"></div> </div> 

Js

 jQuery(function($){ //click event to one common class ie toggle $('.toggle').click(function(){ var target=$(this).data('target'); //get the clicked element target property $('.togglepanel').not($(target)).removeClass('expand'); //remove class from all the togglepanel elements except the current element target $('.toggle').removeClass('close-btn'); //general action in any scenario to remove close-btn if($(target).hasClass('expand')) { //if target has expand class then remove it and do necessary changes $(target).removeClass('expand') $('main').removeClass('move') $(this).removeClass('close-btn') } else { //else add necessary classes $(target).addClass('expand') $('main').addClass('move') $(this).addClass('close-btn') } }) }) 

Answer 2

 jQuery(function($){ $(document).on('click', '.toggle', function (){ // to close all open contents $('.togglepanel').removeClass('expand'); $('main').removeClass('move'); var target = $(this).data("target"); if( $(this).hasClass('close-btn') ){ $('.toggle').toggleClass('close-btn', false); console.log('has close'); $('main').toggleClass('move', false) $(target).toggleClass('expand', false); }else{ $('.toggle').toggleClass('close-btn', false); $(this).toggleClass('close-btn', true); $('main').toggleClass('move', true) $(target).toggleClass('expand', true); console.log('no close'); } }); }) 

 #mainpanel { position: fixed; display: table; top: 0; left: 0; width: 125px; height: 100%; background: #206ba4; vertical-align: middle; z-index: 9999; } main { position: relative; top: 0; margin-left: 125px; transform: translateX(0); transform: translateY(0); transition: transform .5s; } .move { transform: translateX(300px) !important; } .menunav { display: table-cell; color: #fff; z-index: 1001; margin: 20px 0 0; text-align: center; vertical-align: middle; } .menunav div { display: block; width: 100%; margin: 0 0 30px; text-align: center; } .menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after { font-family: FontAwesome; content: "menu"; font-size: 1.8em; font-weight: 200; color: #fff; display: block; height: 1em; width: 1em; margin: 0 0 0 30%; cursor: pointer; } .filter-btn:after { content: "filter"; } .search-btn:after { content: "search"; } .basket-btn:after { content: "basket"; } .account-btn:after { content: "account"; } .close-btn:after { content: "close"; } } .close-btn:after { content: "\f00d"; } .mainmenu, .filter, .search, .basket, .account { position: fixed; width: 300px; top: 0; left: 125px; height: 100%; background: #54a4de; transform: translateX(-100%); transition: transform .5s; z-index: -1; } .expand { transform: translateX(0px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mainpanel"> <div class="menunav"> <div class="toggle menu-btn" data-target=".mainmenu"></div> <div class="toggle filter-btn" data-target=".filter"></div> <div class="toggle search-btn" data-target=".search"></div> <div class="toggle basket-btn" data-target=".basket"></div> <div class="toggle account-btn" data-target=".account"></div> </div> </div> <div class="togglepanel mainmenu"> menu here </div> <div class="togglepanel filter"> filter here </div> <div class="togglepanel search"> search here </div> <div class="togglepanel basket"> basket here </div> <div class="togglepanel account"> account here </div> <main> content will be here </main> 

In fact, you are making a lot of codes that can be converted to a single line. Instead of adding a click event on each button, try something like this:

First add the data-target attribute to your buttons, for example:

 <div class="toggle menu-btn" data-target=".mainmenu"></div> <div class="toggle filter-btn" data-target=".filter"></div> <div class="toggle search-btn" data-target=".search"></div> <div class="toggle basket-btn" data-target=".basket"></div> <div class="toggle account-btn" data-target=".account"></div> 

And on your jQuery:

 jQuery(function($){ $(document).on('click', '.toggle', function (){ // to close all open contents $('.togglepanel').removeClass('expand'); $('main').removeClass('move'); var target = $(this).data("target"); if( $(this).hasClass('close-btn') ){ $('.toggle').toggleClass('close-btn', false); $('main').toggleClass('move', false) $(target).toggleClass('expand', false); }else{ $('.toggle').toggleClass('close-btn', false); $(this).toggleClass('close-btn', true); $('main').toggleClass('move', true) $(target).toggleClass('expand', true); } }); });