Switch Button JavaScript Library

Question

Switch Button JavaScript Library

My project involves creating a mobile website with a simple interaction where clicking on a div opens another div underneath it. The HTML structure consists of two stacked divs, with the CSS for the bottom div initially set to 'none'. Using JavaScript, an event listener is triggered by a click on the top div, changing the display property of the bottom div to 'block' and revealing it. How can I modify the code so that clicking on the top div again will hide the bottom div by setting its display back to 'none'?

Here is the current basic code snippet:

document.getElementById('divOne').addEventListener('click',function(){
    document.getElementById('divTwo').style.display = 'block';
});

#divOne {
    border: 1px solid black;
}

#divTwo {
    border: 1px solid black;
    display: none;
}

<div id="divOne">Click me</div>
<div id="divTwo">Hello World!</div>

javascript css button

Answer 1

Answer №1

To determine if the element has display: block set, you can simply check the style attribute.

document.getElementById('elementOne').addEventListener('click',function() {
    var elementTwo = document.getElementById('elementTwo');
    if(elementTwo.style.display === 'block') {
        elementTwo.style.display = 'none';
    } else {
        elementTwo.style.display = 'block';
    }
});

#elementOne {
  border: 1px solid black;
}

#elementTwo {
  border: 1px solid black;
  display: none;
}

<div id="elementOne">Click me</div>
<div id="elementTwo">Hello World!</div>

Answer 2

To determine if the element has display: block set, you can simply check the style attribute.

document.getElementById('elementOne').addEventListener('click',function() {
    var elementTwo = document.getElementById('elementTwo');
    if(elementTwo.style.display === 'block') {
        elementTwo.style.display = 'none';
    } else {
        elementTwo.style.display = 'block';
    }
});

#elementOne {
  border: 1px solid black;
}

#elementTwo {
  border: 1px solid black;
  display: none;
}

<div id="elementOne">Click me</div>
<div id="elementTwo">Hello World!</div>

Answer 3

Answer №2

To ensure the visibility of an element, you can first check if it is set to 'none' and then toggle it to 'block' or vice versa. I prefer storing the DOM Object of the specific element in a variable for cleaner code organization.

document.getElementById('divOne').addEventListener('click', function() {
  var secondDiv = document.getElementById("divTwo");
  secondDiv.style.display = secondDiv.style.display === 'none' ? 'block' : 'none';
});

Answer 4

To ensure the visibility of an element, you can first check if it is set to 'none' and then toggle it to 'block' or vice versa. I prefer storing the DOM Object of the specific element in a variable for cleaner code organization.

document.getElementById('divOne').addEventListener('click', function() {
  var secondDiv = document.getElementById("divTwo");
  secondDiv.style.display = secondDiv.style.display === 'none' ? 'block' : 'none';
});

Switch Button JavaScript Library

Answer №1

Answer №2

Similar questions

Tips for effectively crafting a component capable of managing both a value and an observable for that specific value

Steps to avoid TypeError: e.target.getAttribute is not a function

When the width of the screen is less than 992 pixels, my div will be hidden

Is there a way to align text in the middle of a full-width jumbotron using bootstrap 4 while also restricting the maximum width of only the div or p container?

Updating the index page with AJAX in Rails 4: Step-by-step guide

Utilizing the principles of object orientation in Javascript to enhance event management

Retrieve the initial value of the input element following a modification

Insert a fresh row into the gridview using JavaScript

Sharing information between controllers while being initiated using $rootScope.$emit

The appearance of a <div> element results in a border being applied to a different element

What causes the Next 13 App to reload when the route is changed?

Exploring FabricJs: Reassessing the coordinates of an object post-rotation

A peaceful WCF service initiates a client callback whenever a server update occurs

Generate a unique identifier for the button by extracting the value from a string

Creating an import map using jspm2 can be done by following these steps

The Angular-Express combination is not being satisfied by the get request

SVG Mask not functioning properly with SVGs created in Illustrator (in all web browsers)

Is there a way to use jQuery to permanently add elements and have them incrementally numbered, such as Cam 1, Cam 2, Cam 3, and so on, while using an iframe?

issue with react prop causing my function to function in one scenario but fail in another

Modify the width of the inner or child elements