Conceal a particular object from view by selecting it from the menu

Question

Conceal a particular object from view by selecting it from the menu

I want to hide a specific element when the burger button is clicked. (See CaptureElementNoDisplay.PNG for the element to hide)

When I click the burger button again to close the menu, I want the hidden item to be displayed once more.

I've successfully hidden the introduction element with the logo when displaying the menu. (Refer to CaptureElementNoDisplay.PNG)

However, I'm struggling to display the div containing the intro and logo in the center again. (See CaptureElementNoMoreDisplay.PNG)

Visit the website:

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;
    }
});

Can you help identify where the issue might be coming from?

Thank you for your assistance in advance.

javascript html jquery css

Answer 1

Answer №1

Make sure to move the variable var booleanNoDisplay outside of your click statement. Additionally, consider converting 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>

Answer 2

Make sure to move the variable var booleanNoDisplay outside of your click statement. Additionally, consider converting 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>

Answer 3

Answer №2

Important points to note

When the boolean is placed within the click event handler, clicking on the button will result in the variable being true every time because it is constantly initialized.
Avoid complicating things by adding a class NoDisplay to intro1 every time the method runs; this step is unnecessary.
The variable name for the Boolean was confusing, so I changed it to IsDisplayed.
Since there are only two scenarios, using else if is not required.

Give this code a try

var IsDisplayed = true;

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

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

Answer 4

Important points to note

When the boolean is placed within the click event handler, clicking on the button will result in the variable being true every time because it is constantly initialized.
Avoid complicating things by adding a class NoDisplay to intro1 every time the method runs; this step is unnecessary.
The variable name for the Boolean was confusing, so I changed it to IsDisplayed.
Since there are only two scenarios, using else if is not required.

Give this code a try

var IsDisplayed = true;

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

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

Answer 5

Answer №3

I modified my code to mirror the structure of your code with some adjustments. Now, I am utilizing the .toggle() method and it seems to be working fine. The only change I made was adding certain properties to my style.css file.

Below is the JavaScript code I'm using:

var isVisible = true;

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

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

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

And here is the CSS code I've added:

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

It's almost achieving the behavior I desire.

Upon clicking the navigation menu on the top left thrice, both the menu and the div containing intro1 are displayed. However, I believe there might be an issue with the condition. Any suggestions on what I should do differently?

You can view the outcome by visiting this link:

Answer 6

I modified my code to mirror the structure of your code with some adjustments. Now, I am utilizing the .toggle() method and it seems to be working fine. The only change I made was adding certain properties to my style.css file.

Below is the JavaScript code I'm using:

var isVisible = true;

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

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

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

And here is the CSS code I've added:

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

It's almost achieving the behavior I desire.

Upon clicking the navigation menu on the top left thrice, both the menu and the div containing intro1 are displayed. However, I believe there might be an issue with the condition. Any suggestions on what I should do differently?

You can view the outcome by visiting this link:

Conceal a particular object from view by selecting it from the menu

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to execute functions inline with conditional logic in react?

Increase the size of the embedded iframe in your Cordova application by using the pinch-to-zoom

Embeddable video player failing to adjust size properly within parent div

Guide on displaying several items from Laravel to Vue through the JavaScript filter method?

Why have the bars been positioned on the left instead of the right, and why does the mobile version require sliding instead of simply accessing the menu through a function?

Version 66 of Chrome on Mobile Browser now offers Autoplay functionality

As the height is expanded, the background color gradually infiltrates the body of the page

What is the syntax for declaring a boolean or object type?

An error occurred while trying to access the stored data at https://localhost:5000. The SSL protocol encountered

Angular 2 - The creation of cyclic dependencies is not allowed

CSS code for vertical navigation arrows to remain on both the left and right sides of the webpage

Renaming properties in an AngularJS model

Displaying specific data points

Differences in Loading Gif Visualization Across Chrome, Safari, and Firefox

Can a shadowed box feature a notch using only CSS?

Create a popup dialog box to appear when a user clicks a button in an MVC3 C# ASP.NET application

Utilize Material UI AutoComplete in React to showcase a variety of choices in a list and capture various selections in the form state, including multiple values

What is the best way to manage files in Vue.js?

Accessing Google Feed API to retrieve media thumbnails

Determining the Last Modified Date for a Sitemap using Javascript