How to change button effects?

August 15, 2022

const msgg = document.getElementById("msgg");
        const iaup = document.getElementById("iaup");
        const iado = document.getElementById("iado");
        const msgc = document.getElementById("msgc");
        const msgarea = document.getElementById("msgarea");
        const nmsg = document.getElementById("nmsg")


        function sMessages1() {
            msgg.classList.toggle("messageBox2");
            iaup.classList.toggle("vdn");
            iado.classList.toggle("vib");
            msgarea.classList.toggle("vib")
        }

body {
        background-color: rgba(0,0,0,0.5);
    }
    .messageBox {
        border-radius: 10px;
        position: fixed;
        right: 5%;
        bottom: 0px;
        width: 250px;
        height: 40px;
        transition: 200ms;
    }
    .messageBox2 {
        bottom: 100px;
        border-radius: 10px;
        position: fixed;
        right: 5%;
        width: 300px;
        height: 40px;
    }
    .messageContainer {
        border: 1px solid lightgray;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .messageText {
        padding-left: 12px;
        font-size: 16px;
    }
    .Icons {
        display: flex;
        position: relative;
        padding-right: 12px;
    }
    .iconMessage {
        display: flex;
        align-items: center;
        border-radius: 50%;
        padding: 6px 7px;
        margin-right: 20px;
        cursor: pointer;
    }
    .iconMessage:hover {
        color: darkorange;
        background-color: rgba(255,165,0,0.1);
    }
    .iconMoreMessage {
        display: flex;
        align-items: center;
        border-radius: 50%;
        padding: 0px 7px;
    }
    .iconMoreMessage:hover {
        color: darkorange;
        background-color: rgba(255,165,0,0.1);
    }

    .messageArea {
        display: none;
        border-right: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        border-left: 1px solid lightgray;
        width: 300px;
        height: 100px;
        background-color: white;
    }
    .vdn {
        display: none !important;
    }
    .vib {
        display: inline-block !important;
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"/>

<div class="messageBox" id="msgg">
            <div class="messageContainer" id="msgc" onclick="sMessages1()">
                <div class="messageText">
                    Messages
                </div>
                <div class="Icons">
                    <div class="iconMessage" id="nmsg">
                        <i class="fa-solid fa-envelope" style="font-size: 13px;color: pink;"></i>
                        <i class="fa-solid fa-plus" style="font-size: 9px;font-weight: bolder;position: absolute;left: 18px;top: 0px;"></i>
                    </div>
                    <div class="iconMoreMessage">
                        <i class="fa-solid fa-angle-up" id="iaup" style="font-size: 13px;"></i>
                        <i class="fa-solid fa-angle-down" id="iado" style="font-size: 13px;display: none;"></i>
                    </div>
                </div>
            </div>
            <div class="messageArea" id="msgarea">

            </div>
        </div>

I’ve tried to make a message box. For now the only thing i want to fix is the new message button/div/icon.

When i click new message button its opening as i wanted. After clicking that button message box must open, so that you can send message to someone. But after when i click new message button again message box is closing. But i do not want it to close. It must work as i said before like sending message to others.

>Solution :

You are looking for stopPropagation

nmsg.addEventListener('click', e => {
  e.stopPropagation()
})

const msgg = document.getElementById("msgg");
const iaup = document.getElementById("iaup");
const iado = document.getElementById("iado");
const msgc = document.getElementById("msgc");
const msgarea = document.getElementById("msgarea");
const nmsg = document.getElementById("nmsg")


function sMessages1() {
  msgg.classList.toggle("messageBox2");
  iaup.classList.toggle("vdn");
  iado.classList.toggle("vib");
  msgarea.classList.toggle("vib")
}

nmsg.addEventListener('click', e => {
  e.stopPropagation()
})

body {
  background-color: rgba(0, 0, 0, 0.5);
}

.messageBox {
  border-radius: 10px;
  position: fixed;
  right: 5%;
  bottom: 0px;
  width: 250px;
  height: 40px;
  transition: 200ms;
}

.messageBox2 {
  bottom: 100px;
  border-radius: 10px;
  position: fixed;
  right: 5%;
  width: 300px;
  height: 40px;
}

.messageContainer {
  border: 1px solid lightgray;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.messageText {
  padding-left: 12px;
  font-size: 16px;
}

.Icons {
  display: flex;
  position: relative;
  padding-right: 12px;
}

.iconMessage {
  display: flex;
  align-items: center;
  border-radius: 50%;
  padding: 6px 7px;
  margin-right: 20px;
  cursor: pointer;
}

.iconMessage:hover {
  color: darkorange;
  background-color: rgba(255, 165, 0, 0.1);
}

.iconMoreMessage {
  display: flex;
  align-items: center;
  border-radius: 50%;
  padding: 0px 7px;
}

.iconMoreMessage:hover {
  color: darkorange;
  background-color: rgba(255, 165, 0, 0.1);
}

.messageArea {
  display: none;
  border-right: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  border-left: 1px solid lightgray;
  width: 300px;
  height: 100px;
  background-color: white;
}

.vdn {
  display: none !important;
}

.vib {
  display: inline-block !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />

<div class="messageBox" id="msgg">
  <div class="messageContainer" id="msgc" onclick="sMessages1()">
    <div class="messageText">
      Messages
    </div>
    <div class="Icons">
      <div class="iconMessage" id="nmsg">
        <i class="fa-solid fa-envelope" style="font-size: 13px;color: pink;"></i>
        <i class="fa-solid fa-plus" style="font-size: 9px;font-weight: bolder;position: absolute;left: 18px;top: 0px;"></i>
      </div>
      <div class="iconMoreMessage">
        <i class="fa-solid fa-angle-up" id="iaup" style="font-size: 13px;"></i>
        <i class="fa-solid fa-angle-down" id="iado" style="font-size: 13px;display: none;"></i>
      </div>
    </div>
  </div>
  <div class="messageArea" id="msgarea">

  </div>
</div>