Hide an item when I click on the menu

Question

I would like to hide an element when I click on the burger button. (The element to hide see CaptureElementNoDisplay.PNG)

I would like to redisplay the item when I click again on the burger button to close the menu.

I managed to make the intro element with the logo hidden when I display the menu. (see CaptureElementNoDisplay.PNG)

But I can't manage to display again the div containing the intro with the logo in the middle. (cf. CaptureElementNoMoreDisplay.PNG)

Link to the website: https://adding.hm-dev.com/1/

Here is the source code.

Source Code HTML :

<nav class="navbar navbar-dark justify-content-end" style="background-color: #0145FF;">
           
<button id="home" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class=" navbar-toggler-icon "></span>
</button></nav>

<section id="intro1" style="height: 652px;background-color: #0145FF; ">

<div class="center logo-intro-1">
<img src="./assets/images/logo_adding.png " alt=" " width="450 ">
</div>

<ul class="nav flex-column text-right pr-5">
<li class="nav-item">
<a class="nav-link2 text-white" href="">Black</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Red</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Violet</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Blue</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Green</a></li></ul>
</section>

Source Code JavaScript :

$('.navbar-toggler').click(function() {
var booleanNoDisplay = true;
var intro1 = document.getElementById("intro1");
intro1.classList.add("NoDisplay");


    if (booleanNoDisplay) {
        console.log('ok TRUE');
        $('#intro1').show(); // This line is not useful because the element is already displayed by default
        booleanNoDisplay = false; //I don't know when to set the value to false...
    }


    if (!booleanNoDisplay) {
        console.log('ok false');
        $('#intro1').hide();
        intro1.classList.add("display-block");

        booleanNoDisplay = true;
    }
});

Do you know where the problem could come from?

I thank you in advance for your help.

Answer 1

I reproduce the logic of your code by adapting a little my code. From now on I use the .toggle(). I see that it's the same. I just had to declare some properties in my style.css file.

Here is my JavaScript code:

var isDisplayed = true;

$('.navbar-toggler').click(function() {

    var intro1 = document.getElementById("intro1");

    if (isDisplayed) {
        console.log('ok TRUE');
        //$('#intro1').hide(); 
        intro1.classList.toggle("noDisplayElement");
        isDisplayed = false;
    } else if (!isDisplayed) {
        console.log('ok false');
        //$('#intro1').hide();
        intro1.classList.toggle("displayElement");
        isDisplayed = true;
    }
});

Here is my CSS code :

.noDisplayElement {
        display: none!important;
    }
    
    .displayElement {
        display: block!important;
    }

Now it does almost what I want.

That is, when I click 3 times on the navigation menu on the top left, it displays the menu and the div containing the intro1. I think the problem comes from the condition. What would you recommend to do?

You can see the result on the link of the site: https://adding.hm-dev.com/1/

Answer 2

Key points

• If the boolean is inside the click event handler, every time the user clicks on the button, the variable will be true, because is always initialized.

• You where adding a class: intro1.classList.add("NoDisplay"); every time the method is executed and that is just complicating things. Is completely unnecessary.

• The Boolean variable name is confusing, I changed it to IsDisplayed

• Else if is not necessary because there are only two scenarious.

Try the following code

var IsDisplayed = true;

$('.navbar-toggler').click(function() {
  
  var intro1 = document.getElementById("intro1");

  if(IsDisplayed){
     $('#intro1').hide();
     IsDisplayed = false;
  } else {
     $('#intro1').show();
     IsDisplayed = true;
  }
 
});

Answer 3

You need to move var booleanNoDisplay out of your click statement, and then you also need to convert if (!booleanNoDisplay) { into an else if statement, like else if (!booleanNoDisplay) {

Demo

var booleanNoDisplay = true;
$('.navbar-toggler').click(function() {
  var intro1 = document.getElementById("intro1");
  intro1.classList.add("NoDisplay");

  if (booleanNoDisplay) {
    console.log('ok TRUE');
    $('#intro1').show(); // This line is not useful because the element is already displayed by default
    booleanNoDisplay = false; //I don't know when to set the value to false...
  } else if (!booleanNoDisplay) {
    console.log('ok false');
    $('#intro1').hide();
    intro1.classList.add("display-block");

    booleanNoDisplay = true;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-dark justify-content-end" style="background-color: #0145FF;">

  <button id="home" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class=" navbar-toggler-icon "></span>
</button></nav>

<section id="intro1" style="height: 652px;background-color: #0145FF; ">

  <div class="center logo-intro-1">
    <img src="./assets/images/logo_adding.png " alt=" " width="450 ">
  </div>

  <ul class="nav flex-column text-right pr-5">
    <li class="nav-item">
      <a class="nav-link2 text-white" href="">Black</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Red</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Violet</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Blue</a></li>
    <li class="nav-item"><a class="nav-link2 text-white" href="#">Green</a></li>
  </ul>
</section>