HTML & JavaScript - Functions inside functions not working

Question

I'm having a problem with my Javascript functions. I try to explain what I'm trying to do. I'm using Bootstrap's accordion to toggle between two different containers. I have two collapsible buttons (made with Fontawosome icons) which are essentially arrows. When user opens the page both buttons are down. When button is clicked a container opens and the 'arrow down' should change to 'arrow up'. But if for example the second arrow is already up when the first arrow is clicked, then the second arrow should return to down position and the first arrow to up position. Like this:

1. arrow ↓ & 2. arrow ↑ --- 1. arrow is clicked --> 1. arrow ↑ & 2. arrow ↓
2. arrow ↑ & 2. arrow ↓ --- 2. arrow is clicked --> 1. arrow ↓ & 2. arrow ↑

I have made some Javascript functions to make this functionality to the page but I cant get it to work. I've checked with Developer Tools that the page runs through all the functions although it should run the functions only when the user clicks on an arrow. And for some reason when the page is opened the arrows aren't even visible. Could you check out my code on Codepen and see whats wrong whit it?

Javascript:

var collapseButton1 = document.getElementById("collapse-button1");
var collapseButton2 = document.getElementById("collapse-button2");

document.querySelector('#collapse-button1').addEventListener('click', 
changeCollapseButton1(collapseButton1, collapseButton2));
document.querySelector('#collapse-button2').addEventListener('click', 
changeCollapseButton2(collapseButton2, collapseButton1));


function changeCollapseButton1(button1, button2){
    console.log("Inside function changeCollapseButton1")
    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
       console.log("Inside if.")
       button1 = changeUp(button1);
       button2 = document.querySelector('#collapse-
button2').addEventListener('click', changeDown(button2));   
       return button1 && button2;
   } else {
       console.log("Inside else.");
       button1 = changeDown(button1);
       return button1;
   }
}

function changeCollapseButton2(button2, button1){
    console.log("Inside function changeCollapseButton2")
    if (button2.classList.contains('fa-chevron-down') && 
button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        button2 = changeUp(button2);
        button1 = document.querySelector('#collapse-
button1').addEventListener('click', changeDown(button1));
       return button2 && button1;
   } else {
       console.log("Inside changeCollapseButton2 else.")
       button2 = changeDown(button2);
       return button2;
   }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton = whichButton.classList.toggle('fa-chevron-down');
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-up');
}
//=========================

The hole code is in codepen: https://codepen.io/Miina/pen/XxRveg The codepen doesn't contain the images, but don't let that distract you.

---

Update:

I made some changes to the code. I added the event listener to the html like this:

<i id="collapse-button1" class="fas fa-chevron-down fa-2x" 
onclick="changeCollapseButton1()" style="color: rgb(64, 127, 127)">
</i>

And then I made changes to the Javascript:

function changeCollapseButton1(){
    console.log("Inside function changeCollapseButton1")
    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
        console.log("Inside if.")
        changeUp(button1);
        changeDown(button2);    
    } else {
        console.log("Inside else.");
        changeDown(button1);
    }
}

function changeCollapseButton2(){
    console.log("Inside function changeCollapseButton2");

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button2.classList.contains('fa-chevron-down') && 
    button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        changeUp(button2);
        changeDown(button1);
    } else {
        console.log("Inside changeCollapseButton2 else.")
        changeDown(button2);
    }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton.classList.toggle('fa-chevron-down');
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-up');
}
//=========================

Now it works "better", but when the buttons are clicked the icons just disappear. So I think there's something wrong with this line:

whichButton.classList.toggle('fa-chevron-down');

And this:

whichButton.classList.toggle('fa-chevron-up');

But I can't figure out what it is. The updated codepen is here: https://codepen.io/Miina/pen/mzwqZx?editors=1010

---

Hey I got it to work!! I called wrong function two times and I had to make some changes to the classList.toggle function call. Here's the working solution:

function changeCollapseButton1(){
    console.log("Inside function changeCollapseButton1")

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button1.classList.contains('fa-chevron-down') && 
    button2.classList.contains('fa-chevron-up')) {
        console.log("Inside if.")
        changeUp(button1);
        changeDown(button2);    
    } else {
        console.log("Inside else.");
        changeUp(button1);
    }
}

function changeCollapseButton2(){
    console.log("Inside function changeCollapseButton2");

    var button1 = document.getElementById("collapse-button1");
    var button2 = document.getElementById("collapse-button2");

    if (button2.classList.contains('fa-chevron-down') && 
    button1.classList.contains('fa-chevron-up')) {
        console.log("Inside changeCollapseButton2's if.");
        changeUp(button2);
        changeDown(button1);
    } else {
        console.log("Inside changeCollapseButton2 else.")
        changeUp(button2);
    }
}

function changeDown(whichButton) {
    console.log("Inside changeDown function.")
    whichButton.classList.toggle('fa-chevron-up', false);
    whichButton.classList.toggle('fa-chevron-down', true);
}

function changeUp(whichButton){
    console.log("Inside changeUp function.")
    whichButton.classList.toggle('fa-chevron-down', false);
    whichButton.classList.toggle('fa-chevron-up', true);
}
//=========================

Answer 1

document.querySelector('#collapse-button1').addEventListener('click', 
changeCollapseButton1(collapseButton1, collapseButton2));

This calls changeCollapseButton1(collapseButton1, collapseButton2) and passes its result to addEventListener . You probably intended

document
    .querySelector('#collapse-button1')
    .addEventListener('click', 
        function() {changeCollapseButton1(collapseButton1, collapseButton2);}
    );

All your addEventListener 's seem to call the intended handler and try to set that result as the handler.