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.https://i.sstatic.net/G70xU.png

https://i.sstatic.net/pZukM.png

https://i.sstatic.net/yIFvW.png

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

Creating custom designs for Material UI components

Exploring the potential of Python loops within Selenium capabilities

Sorting buttons using JQuery UI Buttonset

Issue with PrimeNG Carousel width on mobile devices

"Troubleshooting a 400 Bad Request Error in Node.js and Express for a

Ways to analyze users who have clicked a button

What could be causing my website to extend beyond 100% width?

Accessing and displaying all states in $stateProvider using AngularJS and ui-router

Expand a div without causing any displacement to surrounding elements

Placing a pair of labels onto a bootstrap form while ensuring column alignment

rearrange results in ng-repeat based on specified array in AngularJS

Blend field and JavaScript functions while retrieving data from MongoDB

Encountered an issue when attempting to establish a connection with the REST

Discovering the process of retrieving API data upon a button click within Next.js using server-side rendering

Modify the appearance of the username in the header after logging in with Yii

Using JavaScript within Razor C#

Elegant Border Separator

Tips for integrating custom code into your Angular cli service worker

when the submit button is clicked, verify whether the input field is empty

Disconnected WebSocket in Node.js using Socket.io