How to maximize and minimize a div (no jquery only javascript)-CodePudding

hello I need to maximaze or minimize a div in my html page using only javascript no jquery i wanna be able to do like this http://jsfiddle.net/miqdad/Qy6Sj/1/

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html(" ");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});

this is exactly how i want it to be but no jquery

but with no jquery only javascript, can someone please help me, I googled this everywhere and couldnt find the answer

CodePudding user response：

Here's an example of how you can achieve the same effect using only vanilla JavaScript:

// get the button and box elements
var button = document.getElementById("button");
var box = document.getElementById("box");

// add a click event listener to the button
button.addEventListener("click", function() {
  // toggle the "open" class on the box
  box.classList.toggle("open");
  
  // update the button text
  if (button.innerHTML === "-") {
    button.innerHTML = " ";
  } else {
    button.innerHTML = "-";
  }
});

This code listens for a click event on the button, and then toggles the open class on the box element. The open class could be defined in your CSS as follows:

.open {
  height: auto !important; /* or any other styles you want to apply to the expanded box */
}

This way, you can use CSS transitions to smoothly animate the expansion and contraction of the box. You can also use the button.innerHTML property to update the button text when it is clicked.

An inline example would look like this:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      height: 0;
      overflow: hidden;
      transition: height 0.5s;
    }
    
    .open {
      height: auto !important;
    }
  </style>
</head>
<body>
  <button id="button">-</button>
  <div id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in facilisis magna. Pellentesque hendrerit dolor in ipsum sagittis bibendum.
  </div>
  
  <script>
    // get the button and box elements
    var button = document.getElementById("button");
    var box = document.getElementById("box");

    // add a click event listener to the button
    button.addEventListener("click", function() {
      // toggle the "open" class on the box
      box.classList.toggle("open");

      // update the button text
      if (button.innerHTML === "-") {
        button.innerHTML = " ";
      } else {
        button.innerHTML = "-";
      }
    });
  </script>
</body>
</html>

CodePudding user response：

a simple google search came up with:

https://www.itcodar.com/javascript/expand-div-on-click-with-smooth-animation.html#:~:text=How to display a div with a smooth,transition must include the change of height. Thus:

function seeMore() {
  const text = document.getElementById('website-info-idea')
  const text2 = document.getElementById('website-info-technical')
  text.classList.toggle("show")
  text2.classList.toggle("show")
}

.col {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.col.show {
  opacity: 1;
  height: 23px;
  transition: all 1s ease-in-out;
}

#a1 {
  display:inline-block;
  border: solid 2px black;
}

<div id='a1'>
  <a onclick="seeMore()" >About this Website</a>

  <div  id="website-info-idea">Idea</div>
  <div  id="website-info-technical">Technical</div>
</div>