JavaScript with show and hide using toggle or IF statements on Click

Question

I am just struggling with this problem - for days now. Perhaps I over-complicated a simple piece of code.. but anyway I need to show some divs when a button is clicked, the first set of code would only trigger on the second click (because I used VAR.style.display) so I tried toggle but now it isn't working at all... Please enlighten me what am I doing wrong?

In the first version of code I had the display: none; set on the service menu (servicesMORE), and was just trying to change it when the button (serviceclick) is clicked.

//serviceclick button opens menus
$(".serviceclick").click(function(){

   var service = document.getElementById("servicesMORE");
   var serviceclick = document.getElementById("scroll_to_explore2");

//more than 768 and services hidden
   if(service.style.display === "none" && document.documentElement.clientWidth > 768){
       document.getElementById("services").style.height = "1600px";
       service.style.display = "block";
       serviceclick.style.display = "none";
   }
//less than 400 and services hidden
    else if(service.style.display === "none" && document.documentElement.clientWidth < 400){
       document.getElementById("services").style.height = "1100px";
       service.style.display = "block";
       serviceclick.style.display = "none";
   }
//less than 400 and services shown
    else if(service.style.display === "block" && document.documentElement.clientWidth < 400){
       document.getElementById("services").style.height = "400px";
       service.style.display = "none";
        serviceclick.style.display = "block";
   }
//less than 768 and services hidden
    else if(service.style.display === "none" && document.documentElement.clientWidth < 768){
       document.getElementById("services").style.height = "1300px";
       service.style.display = "block";
       serviceclick.style.display = "none";
   }
//less than 768 and services shown
    else if(service.style.display === "block" && document.documentElement.clientWidth < 768){
       document.getElementById("services").style.height = "600px";
       service.style.display = "none";
        serviceclick.style.display = "block";
   }
//this covers more than 768 and is the default behavior - services hidden
   else{
       document.getElementById("services").style.height = "800px";
       service.style.display = "none";
       serviceclick.style.display = "block";
   }

});

Then in the latest code, I tried the toggle method but I am pretty sure I am missusing it somehow which is why it does nothing when button is clicked.

For this, I took removed the CSS property display: none; from the services menus, assigned the .hiddenSER class to the services menus and added this to CSS:

.hiddenSER {
    display: none;
}

.showSER{
    display: block;
}

And the JS for the second version:

$(".serviceclick").click(function(){

   var service = document.getElementById("servicesMORE");
   var serviceclick = document.getElementById("scroll_to_explore2");

   $('#servicesMORE').toggleClass('showSER');


});

I would appreciate your expertise, since I can't seem to figure it out.

Answer 1

For show or hide just create simple class with display:none; property and toggle it using jquery like below.

$('#servicesMORE').toggleClass('hiddenSER ');

If you want to hide on load time just assign hiddenSER class to the tag.

Edit: Register function on Click

$(".serviceclick").click(function(){

    $('#servicesMORE').toggleClass('hiddenSER ');

});