Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

I'm Trying To Make A Div Width Expand Once Clicking On Another Div

Post a Comment
Im trying to make a div expanded once you click on another div. In my case I'm try to make div with some text in it expand when the image is clicked. A link to my JSFiddle - https:

Solution 1:

getElementsByClassName returns an array, not a single element.

divs is an array, and you are correctly using a for loop and the index indicator [i] after your variable name divs.

You need a similar for loop for whattochange.

var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
  divs[i].addEventListener("click", function () {
    for (var i = 0; i < whattochange.length; i++) {
      whattochange[i].style.width = '800px';
      whattochange[i].style.transition = 'all 1s';
      whattochange[i].style.backgroundColor = 'red';
    }
  }, false);

Solution 2:

There may be a better way, but you could do it like this:

var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');

for (var i = 0; i < divs.length; i++)
{
    divs[i].addEventListener("click", function() 
    { 
        var w = document.getElementById(this.id.replace('img', 'text'));
        w.style.width = '800px'
        w.style.transition = 'all 1s'
        w.style.backgroundColor = 'red'      
    });

    whattochange[i].id = 'text' + i;
    divs[i].id = 'img' + i;
}

Solution 3:

See the fiddle

Javascript

var divs = document.getElementsByClassName('image');
  var whattochange = document.getElementsByClassName('text');
  for (var i = 0; i < divs.length; i++) {
      divs[i].addEventListener("click", function () {
          for (var i = 0; i < whattochange.length; i++) {
              whattochange[i].style.width = '800px';
              whattochange[i].style.transition = 'all 1s';
              whattochange[i].style.backgroundColor = 'red';
          }
      }, false);
  }

You have to be sure that the elements exist if your JavaScript code depends on them. The reason why your fiddle didnt work was because, you was not loading the script after the body has finished loading.

In your code, One way of achieving this is by putting the <script> tag at the end of the body like this:

<html><head></head><body><scripttype="text/javascript">// code here</script></body>

You can also put all your code in a function for the window.onload event or use jQuery.

Post a Comment for "I'm Trying To Make A Div Width Expand Once Clicking On Another Div"