Html Question posted in
Some basic documentation can be found here.

Html – How to reverse the open up animation of content view on click

function moveRectangles(event) {
  var rectangles = document.querySelectorAll('.rectangle');
  var gap = 5; // Gap between rectangles
  var distance = 100; // Distance to move each rectangle

  // Check if the click target is a rectangle
  if (event.target.classList.contains('rectangle')) {
    // Move the rectangles to the left to create a gap
    for (var i = 0; i < rectangles.length; i++) {
      rectangles[i].style.left = (i * -(distance + gap)) + 'px';
    }
  } else {
    // Reset the position of all rectangles to 0
    for (var i = 0; i < rectangles.length; i++) {
      rectangles[i].style.left = '0px';
    }
  }

  // Prevent click event from bubbling up to the body
  event.stopPropagation();
}
/* CSS to style the rectangles */

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rectangle {
  width: 100px;
  height: 50px;
  background-color: orange;
  position: absolute;       /* Set position to absolute */
  border-radius: 10px;      /* Adjust border radius for rectangle shape */
  transform: rotate(90deg); /* Rotate rectangles by 90 degrees */
  transform-origin: center; /* Set transform origin to the center */
  transition: left 0.5s;    /* Add transition for smooth movement */
  cursor: pointer;          /* Change cursor to pointer when hovering over rectangles */
}
<div class="container" onclick="moveRectangles(event)">
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
</div>

I tried like making the function such that when someone clicks the blank space other than rectangle then the animation should be reversed but im not getting hold of the function on reversing it cause it just sits without doing anything. Like if i click first on the rectangle then then normally it opens or rises up anything u want to call to the left then it should reverse that action when i click the blank space.

It should be like this :
these are the steps of the whole animation

Tags:

2

Answers


  1. 0

    Your if condition is wrong. You’re checking if the element contains elements with classes .rectangle. Instead, you can check the left property of a certain element at a certain index. e.g:

    // Check if the click target is a rectangle
      if (event.target.classList.contains('rectangle') && rectangles[1].style.left === "0px") {
      // the condition above now also checks if the second rectangle's left is 0px
      // Move the rectangles to the left to create a gap
      for (var i = 0; i < rectangles.length; i++) {
        rectangles[i].style.left = (i * -(distance + gap)) + 'px';
      }

    In this logic, we are checking if the left property of the second rectangle is equal to 0px, if so we animate it out, otherwise we reverse the animation.

    EDIT: How is this different from before?
    Before the if-else condition was checking if the parent element has children element with class .rectangle. So the else statement would only run if there were no rectangles. Now, it checks if the left property of the second element is 0px, and in this case else statement would run if it is something else than 0px.

    Login or Signup to reply.
  2. 0

    Your else is never hit, because you can never click inside the container currently. Add a border around the container and you will see why.

    It is positioned absolutely and does not have dimensions, so it is not affected by its children. Thus its size is 0x0. You can’t click on that.

    So, you will have to add the closing code to the click of the document.

    document.querySelector('.container').addEventListener('click', openRectangles);
document.addEventListener('click', closeRectangles);

function isContainerOpen() {
  return Boolean(document.querySelector('.container.is-open'));
}

function toggleContainerState() {
  const container = document.querySelector('.container');
  container.classList.toggle('is-open')
}

function openRectangles(event) {
  event.stopPropagation();
  const isOpen = isContainerOpen();
  const clickedOnRectangle = event.target.classList.contains('rectangle');
  // Check if the click target is a rectangle
  if (!isOpen && clickedOnRectangle) {
    toggleContainerState();
    var rectangles = document.querySelectorAll('.rectangle');
    var gap = 5; // Gap between rectangles
    var distance = 100; // Distance to move each rectangle
    // Move the rectangles to the left to create a gap
    for (var i = 0; i < rectangles.length; i++) {
      rectangles[i].style.left = (i * -(distance + gap)) + 'px';
    }
  }
}

function closeRectangles(event) {
  const isOpen = isContainerOpen();
  // Check if the click target is a rectangle
  if (isOpen) {
    toggleContainerState();
    var rectangles = document.querySelectorAll('.rectangle');
    // Reset the position of all rectangles to 0
    for (var i = 0; i < rectangles.length; i++) {
      rectangles[i].style.left = '0px';
    }
  }
}
    /* CSS to style the rectangles */

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rectangle {
  width: 100px;
  height: 50px;
  background-color: orange;
  position: absolute;
  /* Set position to absolute */
  border-radius: 10px;
  /* Adjust border radius for rectangle shape */
  transform: rotate(90deg);
  /* Rotate rectangles by 90 degrees */
  transform-origin: center;
  /* Set transform origin to the center */
  transition: left 0.5s;
  /* Add transition for smooth movement */
  cursor: pointer;
  /* Change cursor to pointer when hovering over rectangles */
}
    <!-- HTML to create the rectangles -->
<div class="container">
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
  <div class="rectangle" style="left: 0px;"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search