How to Toggle Multiple divs with defferent effect on each div

Question

I have a multiple divs each has its own position. what I want is to toggle each div when a text inside the div is clicked I am new in Javascript so please bear with me. I know how to do it by just toggling one div like i did below.

var para = document.querySelectorAll('.wrap div p');
      for (var i = 0; i < para.length; i++) {
          para[i].addEventListener('click', expand);
      }

      function expand(e) {
       if ((e.target === para[2]) && (document.querySelector('.wrap #three').style.width === '15%')) {
             document.querySelector('.wrap #three').style.width = '100%';
           }else{
             document.querySelector('.wrap #three').style.width = '15%';

           }
       }

I also tried using if else statement but it just expands the div I couldn't shrink it back to its position.. I know there is an easy way to achieve this but I couldn't figure out.

 var para = document.querySelectorAll('.wrap div p'); for (var i = 0; i < para.length; i++) { para[i].addEventListener('click', expand); } function expand(e) { if (e.target === para[0]) { document.querySelector('.wrap #one').style.width = '100%'; } else if (e.target === para[1]) { document.querySelector('.wrap #two').style.width = '100%'; } else if (e.target === para[2]) { document.querySelector('.wrap #three').style.width = '100%'; } else if (e.target === para[3]) { document.querySelector('.wrap #four').style.width = '100%'; } else if (e.target === para[4]) { document.querySelector('.wrap #five').style.width = '100%'; } else if (e.target === para[5]) { document.querySelector('.wrap #six').style.width = '100%'; } else if (e.target === para[6]) { document.querySelector('.wrap #seven').style.width = '100%'; } } 

 .wrap { position: relative; width: 100%; height: 100vh; background: white; display: flex; flex-direction: row; } .wrap div { position: relative; height: 100%; overflow: hidden; background: #fdfdfd; transition: 0.2s ease-in; box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); } .wrap div:before { content: ''; position: absolute; width: 250px; height: 250px; right: -150px; top: 27%; background: red; border-radius: 50%; cursor: pointer; } .wrap p { position: absolute; top: 40%; cursor: pointer; transform: rotate(-90deg); font-size: 25px; font-weight: bold; color: white; font-family: 'Halvetica', sans-serif; } .wrap #one { position: absolute; width: 21%; } .wrap #one:before { background: #FF1D55; } .wrap #one p { right: -8px; } .wrap #two { position: absolute; width: 18%; } .wrap #two:before { background: #FFE31A; } .wrap #two p { right: -23px; } .wrap #three { position: absolute; width: 15%; } .wrap #three:before { background: #00E2AA; } .wrap #three p { right: 2px; } .wrap #four { position: absolute; width: 12%; } .wrap #four:before { background: #B90CB4; } .wrap #four p { right: -13px; } .wrap #five { position: absolute; width: 9%; } .wrap #five:before { background: #FF3400; } .wrap #five p { right: -5px; } .wrap #six { position: absolute; width: 6%; } .wrap #six:before { background: #30B7E2; } .wrap #six p { right: -18px; } .wrap #seven { position: absolute; width: 3%; } .wrap #seven:before { background: #220054; } .wrap #seven p { right: -12px; } 

 <div class="wrap"> <div id="one"> <p>About</p> </div> <div id="two"> <p>Services</p> </div> <div id="three"> <p>Blog</p> </div> <div id="four"> <p>Follow</p> </div> <div id="five"> <p>Team</p> </div> <div id="six"> <p>Contact</p> </div> <div id="seven"> <p>History</p> </div> </div> 

I hope I explain everything clearly. any help would be greatly appreciated

Answer 1

Use classList.add/remove instead of adding inline style through javascript. In your code you are attaching event to p which occupy a very small area, I have added a class p so that it's background can be visible and it will be easy to click.

Also you dont need to target each element and add class to it.

In this example get the target element and it's parent and toggle class

 var para = document.querySelectorAll('.wrap div p'); for (let i = 0; i < para.length; i++) { para[i].addEventListener('click', expand); } function expand(e) { if (e.target.parentNode.classList.contains('fullWidth')) { e.target.parentNode.classList.remove('fullWidth') } else { e.target.parentNode.classList.add('fullWidth') } } 

 .wrap { position: relative; width: 100%; height: 100vh; background: white; display: flex; flex-direction: row; } .wrap div { position: relative; height: 100%; overflow: hidden; background: #fdfdfd; transition: 0.2s ease-in; box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); } .wrap div:before { content: ''; position: absolute; width: 250px; height: 250px; right: -150px; top: 27%; background: red; border-radius: 50%; cursor: pointer; } .wrap p { position: absolute; top: 40%; cursor: pointer; transform: rotate(-90deg); font-size: 25px; font-weight: bold; color: white; font-family: 'Halvetica', sans-serif; } .wrap #one { position: absolute; width: 21%; } .wrap #one:before { background: #FF1D55; } .wrap #one p { right: -8px; } .wrap #two { position: absolute; width: 18%; } .wrap #two:before { background: #FFE31A; } .wrap #two p { right: -23px; } .wrap #three { position: absolute; width: 15%; } .wrap #three:before { background: #00E2AA; } .wrap #three p { right: 2px; } .wrap #four { position: absolute; width: 12%; } .wrap #four:before { background: #B90CB4; } .wrap #four p { right: -13px; } .wrap #five { position: absolute; width: 9%; } .wrap #five:before { background: #FF3400; } .wrap #five p { right: -5px; } .wrap #six { position: absolute; width: 6%; } .wrap #six:before { background: #30B7E2; } .wrap #six p { right: -18px; } .wrap #seven { position: absolute; width: 3%; } .wrap #seven:before { background: #220054; } .wrap #seven p { right: -12px; } p { background: greenyellow } .fullWidth { width: 100% !important; } 

 <div class="wrap"> <div id="one"> <p>About</p> </div> <div id="two"> <p>Services</p> </div> <div id="three"> <p>Blog</p> </div> <div id="four"> <p>Follow</p> </div> <div id="five"> <p>Team</p> </div> <div id="six"> <p>Contact</p> </div> <div id="seven"> <p>History</p> </div> </div>