Change class name depending on existing class name

Question

I have a function which changes the class name of 3 divs when a button is clicked, and need it so the class name changes back when the button is clicked again. All three divs have the class name w-33, the div button which is clicked changes the name of that div to w-60 and the other two to w-20.

I'm assuming there needs to be another if() in there, I've tried this:

var fp = document.getElementById("first-project");
if (fp.classList.contains("w-60")) {}

But I don't know how to do it correctly so that didn't seem to work.

Here's the HTML:

<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>

Here's the function:

function changeClass(div_number) {
    if(div_number==1) {
        document.getElementById("first-project").className="w-60";
        document.getElementById("second-project").className="w-20";
        document.getElementById("third-project").className="w-20";
    }

    if(div_number==2) {
        document.getElementById("first-project").className="w-20";
        document.getElementById("second-project").className="w-60";
        document.getElementById("third-project").className="w-20";
    }

    if(div_number==3) {
        document.getElementById("first-project").className="w-20";
        document.getElementById("second-project").className="w-20";
        document.getElementById("third-project").className="w-60";
    }
}

Here's the HTML after the first div link is clicked:

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

I need it so if div number 1 is clicked again when the class name for first-project is already w-60, then class names for all three divs should change back to w-33, basically reversing what the function is doing.

Answer 1

By adding a button class to each div you don't longer need the id attribute:

<div class="button w-33">
  <a onClick="toggleClass(event)" href="#">Learn More</a>
</div>
<div class="button w-33">
  <a onClick="toggleClass(event)" href="#">Learn More</a>
</div>
<div class="button w-33">
  <a onClick="toggleClass(event)" href="#">Learn More</a>
</div>

And then with JavaScript:

function toggleClass(event) {

  event.preventDefault();

  // Get the clicked link parent div
  var element = event.target.parentNode;

  // Get all buttons
  var buttons = document.querySelectorAll('.button');

  // If the clicked button has the w-33 or the w-20 class
  if(element.classList.contains('w-33') || element.classList.contains('w-20')) {

    // Change class to w-60
    element.classList.remove('w-33', 'w-20');
    element.classList.add('w-60');

    // Leave every other button with the w-20 class
    buttons.forEach(function(button) {
      if(button != element) {
        button.classList.remove('w-33', 'w-60');
        button.classList.add('w-20');
      }
    });
  }

  // In any other case
  else {

    // Set all buttons back to the w-33 class
    buttons.forEach(function(button) {
        button.classList.remove('w-60', 'w-20');
        button.classList.add('w-33');
    });
  }
}

You can see a live example on this pen.

This way you won't need to update your code to add more buttons.

Answer 2

Below code will work when you click on the same div again.

Note: As pere requirement when a div already has w-60 and you click on other div that have w-20 it will not reset the class.

function changeClass(div_number) {
    var fp = document.getElementById("first-project");
    var sp = document.getElementById("second-project");
    var tp = document.getElementById("third-project");

    if (div_number == 1) {
        if (fp.classList.contains("w-60")) {
            resetClassname(fp, sp, tp);
        }

        else {
            fp.className = "w-60";
            sp.className = "w-20";
            tp.className = "w-20";
        }
    }

    if (div_number == 2) {
        if (sp.classList.contains("w-60")) {
            resetClassname(fp, sp, tp);
        }
        else {
            fp.className = "w-20";
            sp.className = "w-60";
            tp.className = "w-20";

        }
    }
    if (div_number == 3) {
        if (tp.classList.contains("w-60")) {
            resetClassname(fp, sp, tp);

        }
        else {
            fp.className = "w-20";
            sp.className = "w-20";
            tp.className = "w-60";
        }
    }
}
function resetClassname(fp, sp, tp) {
    fp.className = "w-33";
    sp.className = "w-33";
    tp.className = "w-33";
}

Answer 3

 <script>
        function changeClass(div_number) {
            if (div_number == 1) {
                if (document.getElementById("first-project").className == "w-60")
                    document.getElementById("first-project").className = "w-33";
                else
                    document.getElementById("first-project").className = "w-60";

                if (document.getElementById("second-project").className == "w-20")
                    document.getElementById("second-project").className = "w-33";
                else
                    document.getElementById("second-project").className = "w-20";

                if (document.getElementById("third-project").className == "w-20")
                    document.getElementById("third-project").className = "w-33";
                else
                    document.getElementById("third-project").className = "w-20";
            }

            if (div_number == 2) {
                document.getElementById("first-project").className = "w-20";
                document.getElementById("second-project").className = "w-60";
                document.getElementById("third-project").className = "w-20";
            }
            if (div_number == 3) {
                document.getElementById("first-project").className = "w-20";
                document.getElementById("second-project").className = "w-20";
                document.getElementById("third-project").className = "w-60";
            }
        }
    </script>
    <br />
    <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>

please check the code 

i added some if statement when click on div to change the class name for example

            if (document.getElementById("first-project").className == "w-60")
                document.getElementById("first-project").className = "w-33";
            else
                document.getElementById("first-project").className = "w-60";

first if statement check the class name if is changed then role back in else change the class name.