Having just one selected item in javascript by add & remove classlist

I have prepared code below but i have some UI problems with it i want it to have one selected item at first and display the service content belongs to it then change the content & selected box by user click it is working fine with changing the content but it will not remove the orange border from the old box. it will be great if someone can help me with it.

function changeContent(service) {
    document.getElementById(service).classList.remove("selected-service");
    switch(service) {
        default:
        document.getElementById("services-content").innerHTML = service
        document.getElementById(service).classList.add("selected-service");
    } 
}

.our-services div {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: 20px;
        padding: 30px;
    display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.our-services div h4 {
    margin-bottom:0!important
}

.selected-service {
        border: 2px dashed #ff7200;
}

.our-services {
    direction: ltr;
    text-align: center;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
}

.data-center { grid-area: 1 / 1 / 2 / 2; }
.VDSL { grid-area: 1 / 2 / 2 / 3; }
.ADSL2+ { grid-area: 1 / 3 / 2 / 4; }
.TD-LTE { grid-area: 1 / 4 / 2 / 5; }
.dedicatd-bandwidth { grid-area: 1 / 5 / 2 / 6; }
.VOIP { grid-area: 2 / 5 / 3 / 6; }
.SIP-TRUNK { grid-area: 3 / 5 / 4 / 6; }
.content { grid-area: 2 / 1 / 4 / 5; }

    <div class="our-services">
  <div onclick="changeContent('adsl')" id="adsl" class="ADSL2+"> 
      <img src="http://31.184.128.92/wp-content/uploads/2022/10/adsl-1-1-1.png" alt="ADSL2+"/>
    
      <h4>
        ADSL2+
      </h4>
  </div>

  <div onclick="changeContent('vdsl')" id="vdsl" class="VDSL">
     <img src="http://31.184.128.92/wp-content/uploads/2022/10/Group-21874-1.png" alt="VDSL"/>
    
    <h4>
      VDSL
    </h4>
  </div>

  <div onclick="changeContent('voip')" id="voip" class="VOIP">
      <img src="http://31.184.128.92/wp-content/uploads/2022/10/voip-1-1.png" alt="VOIP"/>
    
      <h4>
        تلفن ثابت 
      </h4>
   </div>

  <div onclick="changeContent('tdlte')" id="tdlte" class="TD-LTE">
        <img src="http://31.184.128.92/wp-content/uploads/2022/10/Group-21-1.png" alt="TD-LTE"/>
    
      <h4>
        TD-LTE
      </h4>
  </div>

  <div onclick="changeContent('bandwidth')" id="bandwidth" class="dedicatd-bandwidth  selected-service">
      <img src="http://31.184.128.92/wp-content/uploads/2022/10/Group-22.png" alt="dedicatd-bandwidth"/>
    
      <h4>
      bandwidth
      </h4>
  </div>

  <div onclick="changeContent('datacenter')" id="datacenter" class="data-center">
    <img src="http://31.184.128.92/wp-content/uploads/2022/10/data-center-2-1.png" alt="datacenter"/>
    
    <h4>
      دیتاسنتر
    </h4>
  </div>
   
   
  <div onclick="changeContent('siptrunk')" id="siptrunk" class="SIP-TRUNK">
     <img src="http://31.184.128.92/wp-content/uploads/2022/10/voip-3-1.png" alt="SIP-TRUNK"/>
    
      <h4>
        SIP  /  
      </h4>
  </div>
  <div id="services-content" class="content">
    <p class="services-title m-0">
      پهنای باند اختصاصی 
    </p>
    
    <p class="services-sub-description">
     description
    </p>
    
    <p class="services-description m-0">
    hhhhhhhh
    </p>

  <span style="display:flex;justify-content-center;align-items:center;margin-top:65px">
    <button style="border:1px solid #FF7200;color:#FF7200;padding:14px 32px;background:#fff;border-radius:50px">
        مشاهده و خرید
    </button>
  </span>
  </div>
</div>

Answer

After clicking,you need to remove class selected-service for all elements and assign it to the current element

let eles = document.querySelectorAll('.selected-service')
for(let i=0;i<eles.length;i++){
  eles[i].classList.remove('selected-service'); 
}

Or we can use a variable to store the previous cliked element and the next time just remove style from the previous one

Note: document.getElementById(service).classList.remove("selected-service"); will just remove class from the current element.

function changeContent(service) {
    let eles = document.querySelectorAll('.selected-service')
    for(let i=0;i<eles.length;i++){
      eles[i].classList.remove('selected-service'); 
    }
    switch(service) {
        default:
        document.getElementById("services-content").innerHTML = service
        document.getElementById(service).classList.add("selected-service");
    } 
}

.our-services div {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: 20px;
        padding: 30px;
    display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.our-services div h4 {
    margin-bottom:0!important
}

.selected-service {
        border: 2px dashed #ff7200;
}

.our-services {
    direction: ltr;
    text-align: center;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
}

.data-center { grid-area: 1 / 1 / 2 / 2; }
.VDSL { grid-area: 1 / 2 / 2 / 3; }
.ADSL2+ { grid-area: 1 / 3 / 2 / 4; }
.TD-LTE { grid-area: 1 / 4 / 2 / 5; }
.dedicatd-bandwidth { grid-area: 1 / 5 / 2 / 6; }
.VOIP { grid-area: 2 / 5 / 3 / 6; }
.SIP-TRUNK { grid-area: 3 / 5 / 4 / 6; }
.content { grid-area: 2 / 1 / 4 / 5; }

<div class="our-services">
  <div onclick="changeContent('adsl')" id="adsl" class="ADSL2+"> 
      <img src="http://31.184.128.92/wp-content/uploads/2022/10/adsl-1-1-1.png" alt="ADSL2+"/>
    
      <h4>
        ADSL2+
      </h4>
  </div>

  <div onclick="changeContent('vdsl')" id="vdsl" class="VDSL">
     <img src="http://31.184.128.92/wp-content/uploads/2022/10/Group-21874-1.png" alt="VDSL"/>
    
    <h4>
      VDSL
    </h4>
  </div>

  <div onclick="changeContent('voip')" id="voip" class="VOIP">
      <img src="http://31.184.128.92/wp-content/uploads/2022/10/voip-1-1.png" alt="VOIP"/>
    
      <h4>
        تلفن ثابت 
      </h4>
   </div>

  <div onclick="changeContent('tdlte')" id="tdlte" class="TD-LTE">
        <img src="http://31.184.128.92/wp-content/uploads/2022/10/Group-21-1.png" alt="TD-LTE"/>
    
      <h4>
        TD-LTE
      </h4>
  </div>

  <div onclick="changeContent('bandwidth')" id="bandwidth" class="dedicatd-bandwidth  selected-service">
      <img src="http://31.184.128.92/wp-content/uploads/2022/10/Group-22.png" alt="dedicatd-bandwidth"/>
    
      <h4>
      bandwidth
      </h4>
  </div>

  <div onclick="changeContent('datacenter')" id="datacenter" class="data-center">
    <img src="http://31.184.128.92/wp-content/uploads/2022/10/data-center-2-1.png" alt="datacenter"/>
    
    <h4>
      دیتاسنتر
    </h4>
  </div>
   
   
  <div onclick="changeContent('siptrunk')" id="siptrunk" class="SIP-TRUNK">
     <img src="http://31.184.128.92/wp-content/uploads/2022/10/voip-3-1.png" alt="SIP-TRUNK"/>
    
      <h4>
        SIP  /  
      </h4>
  </div>
  <div id="services-content" class="content">
    <p class="services-title m-0">
      پهنای باند اختصاصی 
    </p>
    
    <p class="services-sub-description">
     description
    </p>
    
    <p class="services-description m-0">
    hhhhhhhh
    </p>

  <span style="display:flex;justify-content-center;align-items:center;margin-top:65px">
    <button style="border:1px solid #FF7200;color:#FF7200;padding:14px 32px;background:#fff;border-radius:50px">
        مشاهده و خرید
    </button>
  </span>
  </div>
</div>

Advertisement

Answer