Telegram API Question posted in
A comprehensive official documentation can be found here.

Toggle Between Search Icon and Cancel Icon – Telegram API

I need to toggle between two icons (basically search icon and cancel icon) when a particular element is clicked using jQuery. In the case of the code below, the telegram icon changes to whatsapp icon on click. I want to change back to telegram icon when the whatsapp icon is clicked. I would be grateful if the same code can also be written in JavaScript.

$(document).ready(function() {
  $(".searchIcon").click(function() {
    $(".search").toggleClass("active");

    $(".searchIcon").attr(
      "src",
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0"
    );
  });
});
body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: navy;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(250px + 20px + 7px + 7px);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  height: 28px;
}

.search img:hover {
  cursor: pointer;
}

.searchIcon-wrapper {
  background-color: navy;
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.search input {
  position: absolute;
  right: 0px;
  width: 250px;
  padding: 3px 10px;
  font-size: 16px;
  transform: translateX(calc(100% + 34px));
  transition: transform 0.5s ease-in-out;
}

.search.active input {
  transform: translateX(-34px);
}

.search.active {
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1.5s;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <div class="searchIcon-wrapper">
      <img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" alt="" style: "width: 20px; height:20px;"/>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    Have a go with this

    I extracted the style (you had a typo -colon after style instead of equal sign) and hid the second icon

    .searchIcon {
  width: 20px;
  height: 20px;
}

.searchIcon:nth-child(2) {
  display: none;
}

    jQuery

    $(function() {
  $(".searchIcon").on("click",function() {
    $(".search").toggleClass("active");
    $(this).toggle()
    $(this).siblings().toggle()
  });
});
    body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: navy;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(250px + 20px + 7px + 7px);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  height: 28px;
}

.search img:hover {
  cursor: pointer;
}

.searchIcon-wrapper {
  background-color: navy;
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.search input {
  position: absolute;
  right: 0px;
  width: 250px;
  padding: 3px 10px;
  font-size: 16px;
  transform: translateX(calc(100% + 34px));
  transition: transform 0.5s ease-in-out;
}

.search.active input {
  transform: translateX(-34px);
}

.search.active {
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1.5s;
}

.searchIcon {
  width: 20px;
  height: 20px;
}

.searchIcon:nth-child(2) {
  display: none;
}
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <div class="searchIcon-wrapper">
      <img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" />
      <img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
    </div>
  </div>
</div>

    Vanilla JS

    I added a new class

    .searchIcon {
  display: none;
}
.isVisible {
  display:block
}

    window.addEventListener("load", function() { // page load
  document.querySelector(".searchIcon-wrapper").addEventListener("click", function(e) { // delegation
    const tgt = e.target;
    if (tgt.classList.contains("searchIcon")) { // one of the images
      document.querySelector(".search").classList.toggle("active"); 
      tgt.classList.toggle("isVisible");
      const sib = tgt.classList.contains("whatsapp") ? 1 : 2; // which did we click?
      document.querySelector(".searchIcon:nth-child("+sib+")").classList.toggle("isVisible");
    }
  });
});
    body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: navy;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(250px + 20px + 7px + 7px);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  height: 28px;
}

.search img:hover {
  cursor: pointer;
}

.searchIcon-wrapper {
  background-color: navy;
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.search input {
  position: absolute;
  right: 0px;
  width: 250px;
  padding: 3px 10px;
  font-size: 16px;
  transform: translateX(calc(100% + 34px));
  transition: transform 0.5s ease-in-out;
}

.search.active input {
  transform: translateX(-34px);
}

.search.active {
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1.5s;
}

.searchIcon {
  width: 20px;
  height: 20px;
}

.searchIcon {
  display: none;
}
.isVisible {
  display:block
}
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <div class="searchIcon-wrapper">
      <img class="searchIcon isVisible" src="https://www.telegram.org/img/t_logo.png" />
      <img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    I created a reusable function so that you can change another img src like this in the future if you wanted to.

    var searchIcon = document.getElementsByClassName("searchIcon")[0];

function togglesrc(obj, icon_off, icon_on){
  if(obj.src == icon_off){
    obj.src = icon_on;
  }
  else{
     obj.src = icon_off;
  }
}

searchIcon.addEventListener("click",function(){
   document.querySelector(".search").classList.toggle("active");
   
   var icon_on = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0";
   
   var icon_off = "https://www.telegram.org/img/t_logo.png";
  togglesrc(this, icon_off, icon_on);
});
    body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: navy;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(250px + 20px + 7px + 7px);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  height: 28px;
}

.search img:hover {
  cursor: pointer;
}

.searchIcon-wrapper {
  background-color: navy;
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.search input {
  position: absolute;
  right: 0px;
  width: 250px;
  padding: 3px 10px;
  font-size: 16px;
  transform: translateX(calc(100% + 34px));
  transition: transform 0.5s ease-in-out;
}

.search.active input {
  transform: translateX(-34px);
}

.search.active {
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1.5s;
}
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <div class="searchIcon-wrapper">
      <img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" alt="" style: "width: 20px; height:20px;"/>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    So what I personally would do is use psuedo elements on the iconWrapper div and then just toggle a class on and off hiding or showing the respective pseudo element. You can either put the images as their content value or use the background-image property and set the images there.

    var el = document.querySelector('.iconWrapper');

el.onclick = function() {
  el.classList.toggle('active');
}
    .iconWrapper {
  width: 100px;
  height: 50px;
  background: blue;
  position: relative;
}

.iconWrapper:before, .iconWrapper:after {
  width: 50px;
  height: 50px;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -50px;
}

.iconWrapper:before {
 background: green;
 display: none;
}

.iconWrapper:after {
 background: red;
}

.iconWrapper.active:before { display: block; }
.iconWrapper.active:after { display: none; }
    <div class="iconWrapper"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search