0

Sidebar menu I'm making in JSFiddle: https://jsfiddle.net/jvp2h1am/.

Should be fairly simple. How can I refactor my JS to show the slide/submenu for the button that's clicked on without making a separate function for each button?

Also, how could I make it so that when one of these menus is opened by clicking on the button, the currently open submenu is closed? Example: Personal menu is open, click on business button to open business menu, personal menu also closes in same function.

HTML:

<div id="sidebarPrimary">

        <ul id="sidebarPrimaryNav">

            <li class="navButton"><a href="#" target="blank_">JA</a></li>

            <li id="homeButton" class="navButton active"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-home"></span>Home

                </div>

            </a></li>

            <li id="personalButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-user"></span>Personal

                </div>

            </a></li>

            <li id="businessButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-briefcase"></span>Business

                </div>

            </a></li>

            <li id="invoicesButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-gbp"></span>Invoices

                </div>

            </a></li>

            <li id="contactsButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-address-book"></span>Contacts

                </div>

            </a></li>

            <li id="expensesButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-minus"></span>Expenses

                </div>

            </a></li>

            <li id="payslipsButton" class="navButton"><a href="#">

                <div class="navButtonContent">

                    <span class="fa fa-lg fa-list"></span>Payslips

                </div>

            </a></li>

        </ul>

    </div>

    <div id="personalMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="businessMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="invoicesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="contactsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="expensesMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

    <div id="payslipsMenu" class="submenu">

        <ul class="submenuGroup">

            <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>

            <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>

            <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>

            <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>

        </ul>

        <ul class="submenuGroup">

            <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>

            <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>

            <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>

        </ul>

    </div>

JS:

$(document).ready(function() {

$('#personalButton').click(function() {

    $('#personalMenu').toggleClass('open');

});

$('#businessButton').click(function() {

    $('#businessMenu').toggleClass('open');

});

$('#invoicesButton').click(function() {

    $('#invoicesMenu').toggleClass('open');

});

$('#contactsButton').click(function() {

    $('#contactsMenu').toggleClass('open');

});

$('#expensesButton').click(function() {

    $('#expensesMenu').toggleClass('open');

});

$('#payslipsButton').click(function() {

    $('#payslipsMenu').toggleClass('open');

});

})

1 Answers1

0

$(document).ready(function() {
    
    $('.navButton').click(function() {
        
        $('#'+$(this).attr('show-id')).toggleClass('open');
        
    });
   
})
/* 
COLOUR PALETTE 
sidebar primary background: #2F323E;
sidebar secondary background: #262A34;
page primary background: #fff;
page secondary background: #F4F7FA;
subdued text: #687381;
primary text: #445165;
secondary text: #C0C7D1;
*/

/* GENERAL TEXT STYLING */

::selection 
{
 background: #2d2d2d;
 color: #fff;
}

::-moz-selection 
{
 background: #2d2d2d;
 color:#fff;
}

::-webkit-selection 
{
 background: #2d2d2d;
 color:#fff;
}

a, p, input, textarea, h1, h2, h3, h4, ul > li
{
    color: #445165;
}

a, p, input, textarea, ul > li
{
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4
{
    font-family: 'Montserrat', sans-serif;
}

h1, h2
{
    font-weight: 700;
}

a
{
    transition: 0.1s ease;
    -moz-transition: 0.1s ease;
    -webkit-transition: 0.1s ease;
}

a:focus
{
    text-decoration: none;
}

a:hover
{
    text-decoration: none;
}

p
{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

a.button
{
    padding: 10px 25px;
    color: #fff;
    background: #26BB87;
    border: none;
    border-radius: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
}

a.button > span
{
    margin-right: 10px;
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
}

a.button:hover
{
    background: #1a7f5c;
}


/* GENERAL LAYOUT */

html, body 
{
    padding: 0;
    margin: 0;
    background-color: #fff;
}


/* SIDEBAR PRIMARY */

#sidebarPrimary
{
    position: fixed;
    width: 5vw;
    height: 100%;
    top: 0;
    left: 0;
    background: #2F323E;
    z-index: 99;
}

#sidebarPrimary > ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sidebarPrimary > ul > li.navButton
{
    width: 100%;
    height: 5vw;
}

#sidebarPrimary > ul > li.navButton:first-of-type > a,
#sidebarPrimary > ul > li.navButton:first-of-type > a:focus
{
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', 'Open Sans', sans-serif;
}

#sidebarPrimary > ul > li.navButton > a,
#sidebarPrimary > ul > li.navButton > a:focus
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #687381;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

#sidebarPrimary > ul > li.navButton.active > a
{
    color: #fff;
}

#sidebarPrimary > ul > li.navButton > a:hover
{
    text-decoration: none;
    color: #fff;
    background: #E95656;
}

#sidebarPrimary > ul > li.navButton > a span
{
    display: block;
    text-align: center;
    margin-bottom: 5px;
}


/* SUBMENU */

.submenu
{
    position: fixed;
    min-width: 15vw;
    height: 100%;
    top: 0;
    left: 5vw;
    background: #262A34;
    transform: translateX(-300px);
    transition: all linear 0.1s;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    z-index: 98;
}

.submenu.open
{
    transform: translateX(0);
}

.submenu.close
{
    transform: translateX(-300px);
}

.submenu > ul.submenuGroup

{
    list-style-type: none;
    margin: 0;
    padding: 25px 0;
    border-bottom: 2px solid #232731;
}

.submenu > ul.submenuGroup:first-of-type
{
    padding-top: 0;
}

.submenu > ul.submenuGroup:last-of-type
{
    border: none;
}

.submenu > ul.submenuGroup > li.navButtonSub
{
    width: 100%;
    height: 50px;
}

.submenu > ul.submenuGroup > li.navButtonSub > a
{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #687381;
    text-decoration: none;
}

.submenu > ul.submenuGroup > li.navButtonSub.active > a
{
    color: #fff;
}

.submenu > ul.submenuGroup > li.navButtonSub > a:hover
{
    color: #fff;
    background: #1D202B;
}


/* MAIN */

main
{
    min-height: 120vh;
    width: 100%;
    padding-left: 5vw;
    background: #F4F7FA;
}


/* TOP NAV */

#topnav
{
    position: fixed;
    height: 5vw;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    z-index: 95;
}

#topnav > div#topnavLeft
{
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 30px;
}

#topnav > div#topnavLeft > a.button
{
    margin-right: 30px;
}

#topnav > ul
{
    margin: 0;
    margin-right: 5vw;
    padding: 0;
    right: 0;
    list-style-type: none;
    height: 100%;
    display: flex;
    align-items: center;
}

#topnav > ul > li.navButton
{
    height: 100%;
    width: 5vw;
}

#topnav > ul > li.navButton > a,
#topnav > ul > li.navButton > a:focus
{
    display: block;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#topnav > ul > li.navButton > a:hover
{
    color: #C0C7D1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body data-ng-app="dashboardApp">

        <div id="sidebarPrimary">
            
            <ul id="sidebarPrimaryNav">
               
                <li class="navButton"><a href="https://www.justaccounts.com/" target="blank_">JA</a></li>
                
                <li id="homeButton" class="navButton active"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-home"></span>Home
                    
                    </div>
                    
                </a></li>
                
                <li show-id="personalMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-user"></span>Personal
                    
                    </div>
                    
                </a></li>
                
                <li show-id="businessMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-briefcase"></span>Business
                    
                    </div>
                    
                </a></li>
                
                <li show-id="invoicesMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-gbp"></span>Invoices
                    
                    </div>
                    
                </a></li>
                
                <li show-id="contactsMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-address-book"></span>Contacts
                    
                    </div>
                    
                </a></li>
                
                <li show-id="expensesMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-minus"></span>Expenses
                    
                    </div>
                    
                </a></li>
                
                <li show-id="payslipsMenu" class="navButton"><a href="#">
                   
                    <div class="navButtonContent">
                        
                        <span class="fa fa-lg fa-list"></span>Payslips
                    
                    </div>
                    
                </a></li>
                
            </ul>
            
        </div>
        
        <div id="personalMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="businessMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="invoicesMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="contactsMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="expensesMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <div id="payslipsMenu" class="submenu">
           
            <ul class="submenuGroup">
            
                <li class="navButtonSub active"><a href="#">One<span>5</span></a></li>
            
                <li class="navButtonSub"><a href="#">Two<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Three<span>6</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Four<span>9</span></a></li>
            
                <li class="navButtonSub"><a href="#">Five<span>3</span></a></li>
                
                <li class="navButtonSub"><a href="#">Six<span>2</span></a></li>
            
            </ul>
            
            <ul class="submenuGroup">
            
                <li class="navButtonSub"><a href="#">Seven<span>11</span></a></li>
            
                <li class="navButtonSub"><a href="#">Eight<span>0</span></a></li>
                
                <li class="navButtonSub"><a href="#">Nine<span>2</span></a></li>
            
            </ul>
            
        </div>
        
        <main>
            
            <div id="topnav">
              
                <div id="topnavLeft">
                    
                    <a class="button" href="#"><span class="fa fa-plus"></span>New Invoice</a>
                    
                </div>
                
                <ul>
                    
                    <li class="navButton"><a href="#"><span class="fa fa-lg fa-sign-out"></span></a></li>
                    
                    <li class="navButton"><a href="#"><span class="fa fa-lg fa-question"></span></a></li>
                    
                    <li class="navButton"><a href="#"><span class="fa fa-lg fa-cog"></span></a></li>
                    
                </ul>
                
            </div>
            
            <div id="mainContent">
                
                
                
            </div>
            
        </main>
   
    </body>

Please check the code. So in this code instead of using unique Id for each button i have used common class and passed and attribute show-id having the Id of the list you wanted to show.

Thanks i wish this might help you

ankit verma
  • 616
  • 5
  • 17