What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Question

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For a better visual explanation, you can check out my CodePen demo here

const viewButtons = document.querySelectorAll(".view-now");

const clickHandler = event => {
  //add "expand" class to div that was clicked
  const propertyDiv = event.target.closest(".property");
  propertyDiv.classList.toggle("expand");

  //if class name = 'property' then display none. this gets rid of the other div on the screen
  const allProps = document.querySelectorAll(".property");
  for (i = 0; i < allProps.length; i++) {
    if (allProps[i].className == 'property') {
      allProps[i].style.display = "none";
    }
  }
};

viewButtons.forEach(item => {
  item.addEventListener("click", clickHandler);
});

javascript jquery html css

Answer 1

Answer №1

To easily switch between viewing modes, you can create two classes: one to hide all properties by default using display: none;, and another to display the clicked property with added styles.

.property.viewing {
  display: none;
}

.property.viewing.active {
  display: block;
  width: 100%;
}

In your click event handler, simply toggle these classes - add .viewing to all properties and .active to the clicked one.

const clickHandler = event => {

  //toggle viewing class on all .property elements
  $(".property").toggleClass("viewing");

  //add "active" class to div that was clicked
  const propertyDiv = event.target.closest(".property");
  propertyDiv.classList.toggle("active");

};

Answer 2

To easily switch between viewing modes, you can create two classes: one to hide all properties by default using display: none;, and another to display the clicked property with added styles.

.property.viewing {
  display: none;
}

.property.viewing.active {
  display: block;
  width: 100%;
}

In your click event handler, simply toggle these classes - add .viewing to all properties and .active to the clicked one.

const clickHandler = event => {

  //toggle viewing class on all .property elements
  $(".property").toggleClass("viewing");

  //add "active" class to div that was clicked
  const propertyDiv = event.target.closest(".property");
  propertyDiv.classList.toggle("active");

};

Answer 3

Answer №2

There are 2 important tasks on our hands:

Firstly, when a property is clicked for the first time, we need to add the class expand to it and add the class hide to all other properties.
Secondly, if a property is clicked for the second time, we should remove the class expand from it and also remove the class hide from all other properties.

It seems like you were heading in the right direction. Just remember to utilize a class for display:none and use it to easily target the clicked element. You can then use parent() to navigate to the level where you want to add or remove classes.

$(document).ready(function() {

  $(".view-now").click(function() {

    /* Check if this property was already expanded */
    if ($(this).parent().parent().parent().hasClass("expand")) {

      /* If yes, remove the expand class */
      $(this).parent().parent().parent().removeClass("expand");

      /* Also un-hide any previously hidden properties */
      $('.property').each(function(i, obj) {
        if ($(this).hasClass('hide') == true) {
          $(this).removeClass('hide');
        }
      });

    } else {

      /* Expand this property */
      $(this).parent().parent().parent().addClass("expand");
      
      /* Hide all properties except for the one that was expanded */
      $('.property').each(function(i, obj) {
        if ($(this).hasClass('expand') == false) {
          $(this).addClass('hide');
        }
      });
    }

  });

})

@import url('https://fonts.googleapis.com/css?family=Muli:800|Open+Sans&display=swap');
body {
  background-color: #e9e9e9;
}

.container {
  max-width: 72em;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff
}

.instructions {
  line-height: 1.4;
}


/**** Your Styles Here ****/

.logo {
  max-width: 300px;
}

.work-container {
  display: flex;
  justify-content: space-between;
}

.property {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  top: 0;
  transition: top ease 0.5s;
  height: 100%;
  width: 300px;
}

.property:hover {
  top: -10px;
}

.property-text {
  padding: 15px;
}

.property-text p:nth-of-type(1) {
  font-family: 'Muli', sans-serif;
  font-size: 25px;
}

.property-text p:nth-of-type(2) {
  color: green;
}

.property-text p:nth-of-type(3) {
  margin-bottom: 30px;
}

.property-text p {
  font-family: 'Open Sans', sans-serif;
  line-height: 15px;
}

.property-text a {
  padding: 10px 25px;
  background-color: #2C64C0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
  text-decoration: none;
  color: white;
  transition: all 0.3s;
}

.property-text a:hover {
  background-color: #1C4795;
}

.property img {
  max-width: 100%;
  transition: all 0.3s;
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
}

.property img:hover {
  transform: scale(1.1);
  overflow: hidden;
}

.hide {
  display: none;
}

.expand {
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="container">

  <div id="your-work-goes-here">
    <div class="work-container">
      <img class="logo" src="https://www.airtightdesign.com/do_not_delete_images_for_coding_test/logo.svg">

      <div class="property">
        <img src="https://www.airtightdesign.com/do_not_delete_images_for_coding_test/property1.jpg">
        <div class="property-text">
          <p>Villa in Cul-de-Sac</p>
          <p>$707 avg/night</p>
          <p>5 BR / 3 BA</p>
          <p>
            <a class="view-now" href="#">View Now <i class="fas fa-chevron-right"></i></a>
          </p>
        </div>
      </div>

      <div class="property">
        <img src="https://www.airtightdesign.com/do_not_delete_images_for_coding_test/property2.jpg">
        <div class="property-text">
          <p>Villa in Jennings</p>
          <p>$456 avg/night</p>
          <p>3 BR / 2 BA</p>
          <p>
            <a class="view-now" href="#">View Now <i class="fas fa-chevron-right"></i></a>
          </p>
        </div>
      </div>
    </div>
  </div>

Answer 4

There are 2 important tasks on our hands:

Firstly, when a property is clicked for the first time, we need to add the class expand to it and add the class hide to all other properties.
Secondly, if a property is clicked for the second time, we should remove the class expand from it and also remove the class hide from all other properties.

It seems like you were heading in the right direction. Just remember to utilize a class for display:none and use it to easily target the clicked element. You can then use parent() to navigate to the level where you want to add or remove classes.

$(document).ready(function() {

  $(".view-now").click(function() {

    /* Check if this property was already expanded */
    if ($(this).parent().parent().parent().hasClass("expand")) {

      /* If yes, remove the expand class */
      $(this).parent().parent().parent().removeClass("expand");

      /* Also un-hide any previously hidden properties */
      $('.property').each(function(i, obj) {
        if ($(this).hasClass('hide') == true) {
          $(this).removeClass('hide');
        }
      });

    } else {

      /* Expand this property */
      $(this).parent().parent().parent().addClass("expand");
      
      /* Hide all properties except for the one that was expanded */
      $('.property').each(function(i, obj) {
        if ($(this).hasClass('expand') == false) {
          $(this).addClass('hide');
        }
      });
    }

  });

})

@import url('https://fonts.googleapis.com/css?family=Muli:800|Open+Sans&display=swap');
body {
  background-color: #e9e9e9;
}

.container {
  max-width: 72em;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff
}

.instructions {
  line-height: 1.4;
}


/**** Your Styles Here ****/

.logo {
  max-width: 300px;
}

.work-container {
  display: flex;
  justify-content: space-between;
}

.property {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  top: 0;
  transition: top ease 0.5s;
  height: 100%;
  width: 300px;
}

.property:hover {
  top: -10px;
}

.property-text {
  padding: 15px;
}

.property-text p:nth-of-type(1) {
  font-family: 'Muli', sans-serif;
  font-size: 25px;
}

.property-text p:nth-of-type(2) {
  color: green;
}

.property-text p:nth-of-type(3) {
  margin-bottom: 30px;
}

.property-text p {
  font-family: 'Open Sans', sans-serif;
  line-height: 15px;
}

.property-text a {
  padding: 10px 25px;
  background-color: #2C64C0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
  text-decoration: none;
  color: white;
  transition: all 0.3s;
}

.property-text a:hover {
  background-color: #1C4795;
}

.property img {
  max-width: 100%;
  transition: all 0.3s;
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
}

.property img:hover {
  transform: scale(1.1);
  overflow: hidden;
}

.hide {
  display: none;
}

.expand {
  width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="container">

  <div id="your-work-goes-here">
    <div class="work-container">
      <img class="logo" src="https://www.airtightdesign.com/do_not_delete_images_for_coding_test/logo.svg">

      <div class="property">
        <img src="https://www.airtightdesign.com/do_not_delete_images_for_coding_test/property1.jpg">
        <div class="property-text">
          <p>Villa in Cul-de-Sac</p>
          <p>$707 avg/night</p>
          <p>5 BR / 3 BA</p>
          <p>
            <a class="view-now" href="#">View Now <i class="fas fa-chevron-right"></i></a>
          </p>
        </div>
      </div>

      <div class="property">
        <img src="https://www.airtightdesign.com/do_not_delete_images_for_coding_test/property2.jpg">
        <div class="property-text">
          <p>Villa in Jennings</p>
          <p>$456 avg/night</p>
          <p>3 BR / 2 BA</p>
          <p>
            <a class="view-now" href="#">View Now <i class="fas fa-chevron-right"></i></a>
          </p>
        </div>
      </div>
    </div>
  </div>

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Answer №1

Answer №2

Similar questions

Performing a Search Operation using AJAX with Elasticsearch

Ways to display a checked or unchecked checkbox in react depending on a boolean value obtained from an API

DevExpress popup remains contained within the iframe and does not overflow beyond its boundaries

Unusual activity observed in HTML5 contenteditable functionality

List arranged in order with a hyperlink in the center and an image positioned on the right side

Ways to merge values across multiple arrays

Overlap bug with Flash content

Using jQuery AJAX to dynamically update two sections of a webpage by executing scripts embedded in the server response

Looking for a way to easily swipe through videos?

Stop Ajax from activating jQuery function

Applying custom CSS designs to images using Thymeleaf

Mongooses do not clutter the array with unnecessary lines

What is the method for assigning a maximum value of 300 to a bootstrap progress bar?

Running the command "nexrjs create next-app" successfully generates all the necessary directories for the

What is the best way to connect a line from the edge of the circle's outermost arc?

Identifying the server control ID on the master page with the help of jQuery

Creating a table with a static first column and vertical text positioned to the left of the fixed column

Drop down list not showing array values

Showing data from a MySql database using an HTML table

Issue with custom page not displaying summary image in Moodle