How to alternate div display based on class name

How to Alternate Div Display Based on Class Name

In web development, it's often necessary to display different elements based on certain conditions. One common approach is to use CSS class names to control the visibility of elements. This can be achieved using various methods, including: 1. Using the `display` property:

<div class="item1">Item 1</div>
<div class="item2">Item 2</div>

.item1 {
  display: block;
}

.item2 {
  display: none;
}

This code defines two divs with the class names "item1" and "item2". The CSS rules specify that "item1" should be displayed as a block element, while "item2" should be hidden by setting its display property to "none". To alternate the display of these divs, you can simply toggle the class names using JavaScript. For example:

document.querySelector(".item1").classList.toggle("item2");
document.querySelector(".item2").classList.toggle("item1");

This code would switch the class names of the two divs, causing "item1" to be hidden and "item2" to be displayed. 2. Using Flexbox:

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.item1 {
  order: 1;
}

.item2 {
  order: 2;
}

In this example, we use Flexbox to create a container div with two child divs, "item1" and "item2". The Flexbox properties are used to arrange the child divs in a row, with "item1" appearing before "item2". To alternate the display order of these divs, you can simply change the `order` property of the CSS classes. For instance:

document.querySelector(".item1").classList.toggle("order-2");
document.querySelector(".item2").classList.toggle("order-1");

This code would change the order of the divs, causing "item2" to appear before "item1". 3. Using CSS Grid:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

In this example, we use CSS Grid to create a container div with two columns. The child divs, "item1" and "item2", are placed in these columns using the `grid-column` property. To alternate the display of these divs, you can change the `grid-column` property of the CSS classes. For example:

document.querySelector(".item1").classList.toggle("grid-column-2");
document.querySelector(".item2").classList.toggle("grid-column-1");

This code would switch the grid columns of the two divs, causing "item2" to appear in the first column and "item1" to appear in the second column. By utilizing these methods, you can easily alternate the display of divs based on their class names, providing dynamic and interactive content on your web pages.