CODEWITHSUNDEEP
javascripthtmljquerycss
Alexis
Alexis

Reputation: 97

Cleaner way of writing multiple hide show jquery functions?

New to website development and would greatly appreciate some advice! For this app I am creating I have multiple sections appearing and disappearing on click and I just keep writing out hide(), hide(), hide(), show() for every possible button click. I know there has to be a cleaner more efficient way of writing it! Would anybody have any recommendations?

Please note (that when the button is clicked classes need to be removed as well) Not sure if that makes a big difference.

$( document ).ready(function() {


    var pharmaCanvas = document.getElementById('pharmaceuticals_canvas'); 
    var welcomeCanvas = document.getElementById('welcome_canvas');
    var CK_canvas = document.getElementById('pharma_CK_canvas');
    var QL_canvas = document.getElementById('pharma_QL_canvas');


    $(pharmaCanvas).hide();
    $(pharma_dashboard).hide();
    $(pharma_CK_canvas).hide();
    $(QL_canvas).hide();
    
    




$('.menuBtns').click(function(){

        //This will decrease the left menu size on click// 
        
        $("#left_menu").toggleClass("menu_decrease");
        $(".left_menu_title").toggleClass("menu_decrease_title");


});
    
    $('#pharmBtn').click(function(){
        
        //Opens up Overview, as default
        $(pharmaCanvas).fadeToggle(2000);
        
        //opens up the PHARMA Dashboard / Right Dashboard //
        $(pharma_dashboard).toggle();
        
        //Toggles the WELCOME Dashboard which is not secific to any sector's dashboard//
        $(welcome_dashboard).toggle();
        
        //The secondary menu/ dashboard menu item will turn grey //
        $("#pharma_default").addClass("selected_item_grey");
        
        //This is for the Background  color of the menu will stay when sector is selected//
        $("#pharma_left_menu").toggleClass("selected_left_menu_title");
        
        //Hide all other canvases//
        $(welcomeCanvas).hide();
        $(pharma_CK_canvas).hide();
        $(pharma_QL_canvas).hide();
        $(welcomeCanvas).hide();
    
    })
    
    //Start Dashboard Journey Here//
    
    $('#pharma_OBtn').click(function(){
    
        $(pharmaCanvas).toggle();
        $("#pharma_default").addClass("selected_item_grey");
        $("#pharma_CK").removeClass("selected_item_grey");
        
        $(pharma_CK_canvas).hide();
        $(welcomeCanvas).hide();
        
        $(pharma_QL_canvas).hide();
    
    })

    
    $('#pharma_CKBtn').click(function(){
    
        $(pharma_CK_canvas).toggle();
        $("#pharma_CK").addClass("selected_item_grey");
        $("#pharma_default").removeClass("selected_item_grey");
        $("#pharma_QL").removeClass("selected_item_grey");
        $("#left_menu").addClass("");
        
        $(pharmaCanvas).hide();
        $(pharma_QL_canvas).hide();
    
    })
    
    $('#pharma_QLBtn').click(function(){
    
        $(QL_canvas).toggle();
        $("pharma_QL").addClass("selected_item_grey");
        
        $("#pharma_default").removeClass("selected_item_grey");
        $("#pharma_CK").removeClass("selected_item_grey");
        
        
        $(pharmaCanvas).hide();
        $(pharma_CK_canvas).hide();
    
    })
  
 

});
/* Main Section */

.main_container{

    /* 
    width:1260px;
    height: 470px;
    */
    
    

}

#canvas{
    display: inline-block;
    
}

.column_right{
    float: right;
    position: relative;
    width: 179px;
    border-radius: 5px 0px 0px 5px;
    margin-top: -240px;
    z-index: 3;
    height: 245px;
    background-color: #f6f6fc;
}

#pharma_right_column{
    margin-top: -470px!important;

}

#wrapperForMenus{

    position: sticky;
    top: 0;
}

/* 
::-webkit-scrollbar {
  width: 10px;
  background: white;
}*/

/* Track 
::-webkit-scrollbar-track {
  
  border-radius: 10px;
}
 
 Handle 
::-webkit-scrollbar-thumb {
  background: #dbdbdb; 
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

Handle on hover
::-webkit-scrollbar-thumb:hover {
  background: #b1b0b0; 
}

 */

/* Menus */
#left_menu{
    height: 100vh; 
    width: 200px;
    float: left; 
    background-color: #323896;
}

.main_menu_title{
    font-family: Arial Black;
    font-size: 25px;
    text-decoration: none!important;
    color: white!important;
    margin-left: 10px;
    margin-top: 10px;
}

.main_menu_subtitle{
    font-family: Arial Black;
    font-size: 12px;
    color: white!important;
    text-decoration: none!important;
    margin-left: 10px;
    margin-top: 5px;
}

.left_menu_title{
    font-family: Arial Black!important;
    font-size: 12px;
    color: white!important;
    margin-left: 10px;
    margin-top: 10px;
    height: 35px;
    padding-left: 3px;
    padding-top: 9px;
    border-radius: 5px 0px 0px 5px;
    text-decoration: none!important;

    background: linear-gradient(to right, #323896 50%, #f6f6fc 50%) left;
    background-size: 200%;
    transition: .5s ease-out;
}


.left_menu_title:hover{
    background-position: right;
    color: #323896!important;
    cursor: pointer;
    text-decoration: none!important;
    
}

.row_left_menu_item{

    height: 15%;
}

.menu_decrease{
    width:115px!important;
    transition: all .5s linear;
    
}

.menu_decrease_title{
    font-size: 11px!important; 
}
.menuBtns{
    text-decoration: none!important;
}

.selected_left_menu_title{
    color: #323896!important;
    background: #f6f6fc!important;

}


.dashboard_menu_title{
    font-family: Arial Black;
    font-size: 25px;
    color: #323896!important;
    margin-left: 10px;
    margin-top: 10px;
}

.dashboard_menu_subtitle{
    font-family: Arial Black;
    font-size: 12px;
    color: #acacac!important;
    margin-left: 10px;
    margin-top: 5px;
}
#dashboard_menu{
    height: 100vh; 
    width: 200px;
    float:left;
    background-color: #f6f6fc;
    box-shadow: 4px 0 5px -2px rgb(0 0 0 / 20%);
    border-radius: 0px 5px 5px 0px;
}

.dashboard_menu_selection{
    font-family: Arial Black;
    font-size: 12px;
    color: #acacac!important;
    margin-left: 10px;
    margin-top: 49px;
}
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- J Query Library -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<!-- SPServices -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>

<!-- DataTables -->
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">    
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css"> 
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="/SiteAssets/jquery.SPServices-2013.02a.js" type="text/javascript"></script>

    
    <script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/jquery-1.7.1.min.js" type="text/javascript"></script>  


<div class="main_container" id="welcome_container">
    <div id="wrapperForMenus">
        <div id="left_menu">
            <h1 class="main_menu_title">Sector</h1>
            <h1 class="main_menu_subtitle">Select Sector</h1>
        
            <div class="row_left_menu_item">
                <img class="left_menu_icons" src="">
                <a id="epsBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
            </div>
            <div class="row_left_menu_item">
                <img class="left_menu_icons" src="">
                <a id="enterpriseBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
            </div>
            <div class="row_left_menu_item">
                <img class="left_menu_icons" src="">
                <a id="consumerBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
            </div>

            <div class="row_left_menu_item">
                <img class="left_menu_icons" src="">
                <a id="medBtn" class="menuBtns"><h2 class="left_menu_title" id="">DONT CLICK</h2></a>
            </div>
            <div class="row_left_menu_item">
                <img class="left_menu_icons" src="">
                <a id="pharmBtn" class="menuBtns"><h2 class="left_menu_title" id="pharma_left_menu">CLICK ME!!</h2></a>
            </div>
        </div>

        <div id="welcome_dashboard">
            <div id="dashboard_menu">
                <h1 class="dashboard_menu_title">Index</h1>
                <h1 class="dashboard_menu_subtitle">Select Option below</h1>
                
                <div class="dashboard_menu_row">
                    <h2 class="dashboard_menu_selection" style="margin-top: 100px;" >Please Select Sector to Display Options</h2>
                </div>
            
            </div>
        </div>
        
        <div id="pharma_dashboard">
            <div id="dashboard_menu">
                <h1 class="dashboard_menu_title">BPU Index</h1>
                <h1 class="dashboard_menu_subtitle">Select Option below</h1>
                <a id="pharma_OBtn">
                    <div class="dashboard_menu_row">
                        <h2 class="dashboard_menu_selection" id="pharma_default">Overview</h2>
                    </div>
                </a>
                <a id="pharma_CKBtn">
                    <div class="dashboard_menu_row">
                        <h2 class="dashboard_menu_selection" id="pharma_CK">CK</h2>
                    </div>
                </a>
                <a id="pharma_TrainBtn">
                    <div class="dashboard_menu_row">
                        <h2 class="dashboard_menu_selection" id="pharma_Train">NOT ACTIVE YET</h2>
                    </div>
                </a>
                <a id="pharma_TeamBtn">
                    <div class="dashboard_menu_row">
                        <h2 class="dashboard_menu_selection" id="pharma_Team">NOT ACTIVE YET</h2>
                    </div>
                </a>
                <a id="pharma_QLBtn">
                    <div class="dashboard_menu_row">
                        <h2 class="dashboard_menu_selection" id="pharma_QL">QL</h2>
                    </div>
                </a>

            </div>
        </div>
    </div>
    

                    </div>
                    
                
                        
                </div>

    <div id="welcome_canvas">
            <h1> Welcome Canvas At Start </h1>
    </div>

    <div id="pharmaceuticals_canvas">                   
        <h1> default section</h1>
    </div>
            
    <div id="pharma_CK_canvas">
          <h1> hi CK </h1>
    </div>
        
            <div id="pharma_QL_canvas">
        <h1> hi QL </h1>
            </div>
        


        
        
        

        
        
        
        
        
        <!-- Main Container End -->




</body>
</html>

Upvotes: 0

Views: 61

Answers (1)

TKoL
TKoL

Reputation: 13912

This is very likely not exactly what you're looking for, but it's an implementation of what i suggested in the comments:

var pharmaCanvas = document.getElementById('pharmaceuticals_canvas'); 
var welcomeCanvas = document.getElementById('welcome_canvas');
var CK_canvas = document.getElementById('pharma_CK_canvas');
var QL_canvas = document.getElementById('pharma_QL_canvas');

var elementList = [pharmaCanvas, welcomeCanvas, CK_canvas, QL_canvas, '#pharma_default', '#pharma_left_menu', '#pharma_CK'];

function toggleOrHide(toggle, list) {
  for (let element of list) {
    if (element === toggle) {
      $(element).toggle();
    } else {
      $(element).hide();
    }
  }
}


$('#pharma_OBtn').click(function(){    
    toggleOrHide(pharmaCanvas, elementList);    
})

It seemed like most of your functions were toggle one element, hide all the other ones, so if you are able to keep it consistently like that then you can create a function that does the job for you.

Upvotes: 1

Related Questions