Styjun

I have three divs each with a link inside, when a link is clicked I want the class name of all three divs to change, depending on which link is clicked.

Each div has the class name of w-33 (which makes the div 33% wide), I need the div classes to change to w-60 and w-20.

I have it so the class name changes when the link is clicked but it's only to make the first div w-60 and the other two w-20 regardless of which div link is clicked, I don't know if there's a more efficient way to make it so the div which contains the link that is clicked is the one that gets the w-60 class name other than making three separate functions for each link, so any help is appreciated.

Here are the three divs before the onclick

<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>

Here's the javascript

function changeclass() 
var NAME = document.getElementById("first-project")
NAME.className="w-60 ml-100 mp-100 project"

var NAME = document.getElementById("second-project")
NAME.className="w-20 ml-100 mp-100 project"

var NAME = document.getElementById("third-project")
NAME.className="w-20 ml-100 mp-100 project"
 

Here are the three divs after the onclick

<div class="w-60" id="first-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-20" id="second-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>
<div class="w-20" id="third-project">
<a class="learn-more" onclick="changeclass()">Learn More</a>
</div>

So I need it to be if the link in the first div is clicked, its class name will change to w-60 and the other two classes will change to w-20. if the link in the second div is clicked, the first and last class will change to w-20, and the second to w-60, if the third div's link is clicked that will be the div to get the w-60 class name.

Hey you can do that with the help of parameters like this

<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeclass(1)">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeclass(2)">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeclass(3)">Learn More</a>
</div>

function changeclass(div_number) 
if(div_number==1)

document.getElementById("first-project").className="w-60 ml-100 mp-100 project";
document.getElementById("second-project").className="w-20 ml-100 mp-100 project";
document.getElementById("third-project").className="w-20 ml-100 mp-100 project";

if(div_number==2)

document.getElementById("second-project").className="w-60 ml-100 mp-100 project";
document.getElementById("first-project").className="w-20 ml-100 mp-100 project";
document.getElementById("third-project").className="w-20 ml-100 mp-100 project";


 

You can do something like this

<div class="projects">
 <div class="w-33" id="first-project">
 <a class="learn-more" onclick="changeclass(this)">Learn More</a>
 </div>
 <div class="w-33" id="second-project">
 <a class="learn-more" onclick="changeclass(this)">Learn More</a>
 </div>
 <div class="w-33" id="third-project">
 <a class="learn-more" onclick="changeclass(this)">Learn More</a>
 </div>
</div>

<script>
 function changeclass(elem) 
 let allDivs = document.querySelectorAll('.projects > div');
 for(let oneDiv of allDivs) 
 oneDiv.className = "w-20";
 
 elem.parentNode.className = "w-60";
 
</script>

Here is how I would do it. I would define css styles in classes in my css file-

for example

.selected
 color: white;
 background: steelblue;

and i my JS-

var resetButton = document.getElementById("reset");

now in order to apply css class to an element I would do-

resetButton.classList.add("selected");

or
now in order to remove css class to an element I would do-

resetButton.classList.remove("selected");

or simply toggle

resetButton.toggleClass("selected");

You can pass the event to the function, which will allow you to target the clicked element. So in your inline js it would be onclick="changeClass(event). Then the function would be something like this:

 function changeClass(event) 
 // Set all elements classes to their defaults.
 document.getElementById("first-project").classList = ['w-20', 'project'];
 document.getElementById("second-project").classList = ['w-20', 'project'];
 document.getElementById("third-project").classList = ['w-20', 'project'];

 // Set new classes to the clicked element only
 event.target.classList = ['w-60', 'project'];
 

You can utilize css selector "adjacent" (".hilight + div" = select all neighbours div of '.hilight')

function hilight (hilightID) 
 var allDivs = document.getElementsByClassName('w-33');
 for (i = 0; i < allDivs.length; i++) 
 const theDiv = allDivs[i];
 const isHilight = theDiv.id === hilightID;
 
 if (isHilight) 
 theDiv.classList.add("hilight");
 else 
 theDiv.classList.remove("hilight");
 
 
 

.container display: flex; 
.container > div background: salmon; 

.w-33 width: 33%; 
.hilight width: 60%; 
.hilight + div width: 20%; 

<div class="container">
 <div class="w-33" id="first-project">
 <a class="learn-more" onclick="hilight('first-project')">Learn More</a>
 </div>
 <div class="w-33" id="second-project">
 <a class="learn-more" onclick="hilight('second-project')">Learn More</a>
 </div>
 <div class="w-33" id="third-project">
 <a class="learn-more" onclick="hilight('third-project')">Learn More</a>
 </div>
</div>

My solution. pass event to function and add class w-60 to current element.

function changeClass(event) 
 document.querySelectorAll('.project').forEach(el => 
 el.classList.remove('w-60');
 el.classList.add('w-20')
 )
 let cls = event.target.parentNode.classList
 cls.remove('w-20');
 cls.add('w-60');

#group 
 font-size: 26px;
 margin: 0px;
 display: flex;


.w-60,
.w-20,
.w-33 
 display: inline-flex;
 justify-content: center;
 align-items: center;
 padding: 15px;
 border: 4px solid red;
 transition:all .5s;


.w-33 
 width: 33%;


.w-60 
 width: 60%;
 background: beige;


.w-20 
 width: 19.4%;
 background: lightpink;

<div id="group">
 <div class="w-33 project" id="first-project">
 <a class="learn-more" onclick="changeClass(event)">Learn More</a>
 </div>
 <div class="w-33 project" id="second-project">
 <a class="learn-more" onclick="changeClass(event)">Learn More</a>
 </div>
 <div class="w-33 project" id="third-project">
 <a class="learn-more" onclick="changeClass(event)">Learn More</a>
 </div>
</div>